<template>
    <iframe style="display: none" :src="baseUrl" frameborder="0"></iframe>
    <div class="top" v-if="$route.path == '/playgame' && isPc">
        <div class="left">
            <div class="logo gameLogo" @click="toPage(homeUrl)">
                <img v-if="selectedCountry == 'zh'" width="110" src="../../assets/logo.gif" alt="" />
                <img v-if="selectedCountry == 'en'" width="110" src="../../assets/logo_en.gif" alt="" />
                <!-- <div class="title">
                    <p :style="lang == 'zh' ? '' : 'font-size:15px;'">{{ $t('game_info_title') }}</p>
                </div> -->
            </div>
            <div v-if="isPwa" class="item hover" @click="pwaEvent.prompt()">
                <div class="svg">
                    <svg t="1729064161084" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="14213" width="20" height="20">
                        <path
                            d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                            p-id="14214" fill="#1296db"></path>
                    </svg>
                </div>
                <p>{{ $t("Add_desktop") }}</p>
            </div>
            <div class="item hover" @click="addToFavorites">
                <div class="svg">
                    <svg t="1729064201563" class="icon" viewBox="0 0 1025 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="15307" width="17" height="17">
                        <path
                            d="M1024.049737 393.508571a36.571429 36.571429 0 0 0-29.257143-24.868571l-311.588571-44.617143L544.232594 42.422857a37.302857 37.302857 0 0 0-64.365714 0l-138.971429 281.6L30.769737 365.714286a36.571429 36.571429 0 0 0-29.257143 24.868571 36.571429 36.571429 0 0 0 9.508572 36.571429l224.548571 219.428571-53.394286 311.588572a36.571429 36.571429 0 0 0 14.628572 35.108571 35.108571 35.108571 0 0 0 21.211428 6.582857 33.645714 33.645714 0 0 0 16.091429-4.388571l277.942857-146.285715 277.942857 146.285715a34.377143 34.377143 0 0 0 37.302857 0 36.571429 36.571429 0 0 0 14.628572-35.108572l-53.394286-309.394285 224.548572-219.428572a36.571429 36.571429 0 0 0 10.971428-38.034286z"
                            fill="#1296db" p-id="15308"></path>
                    </svg>
                </div>
                <p>{{ $t("Favorites") }}</p>
            </div>
        </div>
        <div class="right">
            <div class="item">
                <p>
                    {{ $t("Hello") }}
                    <span class="nickname" @click="toPage(homeUrl + '/#/userCenter')">{{
                        user_info.nickname
                        }}</span>
                </p>
                <p class="logout" @click="signOut">{{ $t("login_out") }}</p>
            </div>
            <div class="item hover" @click="toPage(homeUrl + '/#/recharge')">
                <div class="svg">
                    <svg t="1729065106153" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="25161" width="20" height="20">
                        <path
                            d="M382.624676 332.504554l279.628612 0c18.858214 0 37.014904-7.981788 49.119297-22.454576 28.857435-34.295747 56.22408-76.398002 62.363917-114.11443 12.367415-75.520797-19.998641-113.851409-113.851409-113.851409s-62.100696 61.574453-98.589356 66.661803c-27.190965 3.771643-26.226219-32.102834-68.942257-66.574063-30.699586-24.647289-65.082874 44.996692-105.606399 45.435195-47.277146 0.613984-113.763668-12.455155-113.763668 68.328273 0 32.629277 28.594413 76.748764 59.820242 113.324966C345.346751 323.908582 363.4155 332.504554 382.624676 332.504554zM731.458767 404.428989c-14.91109-16.928522-36.576201-26.4017-59.118518-26.4017L373.941164 378.027289c-21.577371 0-42.365276 8.683513-57.276566 24.296527C222.89937 500.562411 136.414607 640.815319 136.414607 743.088578c0 90.168866 90.607368 204.020274 202.353604 204.020274l346.465896 0c111.746236 0 202.353604-112.886463 202.353604-204.020274C887.587911 638.973368 818.031471 502.667583 731.458767 404.428989zM640.325156 528.54284l-59.995523 108.851798c-5.262832 9.560718 1.66647 21.314149 12.542896 21.314149l17.016263 0c7.894248 0 14.384847 6.403059 14.384847 14.384847l0 0c0 7.894248-6.403059 14.384847-14.384847 14.384847l-42.803979 0c-8.33275 0-14.998831 6.66628-15.086571 14.998831l0 7.104783c0 7.894248 6.403059 14.384847 14.384847 14.384847l43.505503 0c7.894248 0 14.384847 6.403059 14.384847 14.384847s-6.403059 14.384847-14.384847 14.384847l-43.505503 0c-7.894248 0-14.384847 6.403059-14.384847 14.384847l0 36.576201c0 7.894248-6.403059 14.384847-14.384847 14.384847l-26.050738 0c-7.894248 0-14.384847-6.403059-14.384847-14.384847l0-36.576201c0-7.894248-6.403059-14.384847-14.384847-14.384847l-43.067001 0c-7.894248 0-14.384847-6.403059-14.384847-14.384847s6.403059-14.384847 14.384847-14.384847l42.97926 0c7.981988 0 14.385047-6.403059 14.472588-14.384847l0.087741-7.017042c0.087741-8.33275-6.66628-15.174312-15.086571-15.174312l-42.453017 0c-7.894248 0-14.384847-6.403059-14.384847-14.384847l0 0c0-7.894248 6.403059-14.384847 14.384847-14.384847l16.57776 0c10.964166 0 17.805728-11.753431 12.542896-21.314149l-59.995723-108.851599c-5.262832-9.560718 1.66647-21.314349 12.542896-21.314349l28.594413 0c5.438113 0 10.437923 3.069919 12.806117 7.894248l48.856076 97.44893c5.262832 10.525464 20.349403 10.525464 25.699975 0l48.856076-97.44893c2.455935-4.824129 7.367805-7.894248 12.806117-7.894248l28.594413 0C638.658486 507.316232 645.587987 518.982122 640.325156 528.54284z"
                            fill="#1296db" p-id="25162"></path>
                    </svg>
                </div>
                <p>{{ $t("recharge_center") }}</p>
            </div>
            <div class="item hover" @click="toPage(homeUrl + '/#/giftPack/0')">
                <div class="svg">
                    <svg t="1729065070946" class="icon" viewBox="0 0 1132 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="23803" width="20" height="20">
                        <path
                            d="M17.885047 226.624992h1096.949544c9.836776 0 17.885047 8.048271 17.885047 17.885047v213.428226c0 9.836776-8.048271 17.885047-17.885047 17.885047H17.885047c-9.836776 0-17.885047-8.048271-17.885047-17.885047V244.510039c0-9.836776 8.048271-17.885047 17.885047-17.885047z"
                            fill="#FF505D" p-id="23804"></path>
                        <path
                            d="M142.335165 475.823312h848.049308c6.557851 0 11.923365 5.365514 11.923365 11.923365V1012.076635c0 6.557851-5.365514 11.923365-11.923365 11.923365h-848.049308c-6.557851 0-11.923365-5.365514-11.923365-11.923365V487.746677c0-6.557851 5.365514-11.923365 11.923365-11.923365z"
                            fill="#FF6174" p-id="23805"></path>
                        <path
                            d="M258.438928 160.59936S128.474254 135.560294 102.540936 126.617771l45.904953 66.025631L65.578505 225.581697s193.903717 35.919136 402.860682 4.918388L367.835798 184.893215l-109.39687-24.293855zM351.888298 3.359989c-66.025632-11.774323-97.473506 11.178154-97.473506 11.178155l-18.034089 114.017174s46.650164-31.745958 101.944768-18.034089c71.987314 18.034089 162.008717 119.978856 162.008717 119.978856v-77.948996S441.313533 19.307489 351.888298 3.359989zM989.639263 192.643402l46.053996-66.025631c-25.933318 8.942523-155.897992 33.981589-155.897993 33.981589L770.398396 184.893215l-100.603389 45.755912c208.956965 31.000748 402.860682-5.06743 402.860682-5.06743L989.639263 192.643402zM901.704449 128.555318L883.819402 14.687186s-31.447874-22.952477-97.473506-11.178155C696.920662 19.456531 637.900007 152.700131 637.900007 152.700131v77.948996s89.872361-101.944767 161.859674-119.978856c55.145561-13.860911 101.944767 17.885047 101.944768 17.885047z"
                            fill="#FFCA3E" p-id="23806"></path>
                        <path d="M491.83879 141.521977h149.042058V1024H491.83879z" fill="#FFCA3E" p-id="23807"></path>
                        <path d="M491.83879 479.99649h149.042058v544.00351H491.83879z" fill="#FFB82C" p-id="23808">
                        </path>
                        <path
                            d="M387.211266 127.959149c-64.982337-37.558599-142.186123-24.890024-150.681521 0.745211-9.38965 28.168949 36.664346 58.126402 103.286146 93.002244 43.818365 22.952477 160.667338 8.942523 160.667339 8.942523s-48.289627-65.280421-113.271964-102.689978zM901.704449 128.555318c-8.495397-25.635234-85.699183-38.303809-150.681521-0.745211s-113.271964 102.689978-113.271963 102.689978 116.998015 14.009953 160.667338-8.942523c66.6218-34.726799 112.675796-64.833295 103.286146-93.002244z"
                            fill="#FFB82C" p-id="23809"></path>
                    </svg>
                </div>
                <p>{{ $t("gift_pack") }}</p>
            </div>
            <div class="item hover" @click="toPage(fb_url)">
                <div class="svg">
                    <svg t="1729065003414" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="21652" width="17" height="17">
                        <path
                            d="M546.986667 1024H56.490667A56.533333 56.533333 0 0 1 0 967.466667V56.533333C0 25.301333 25.301333 0 56.533333 0h910.933334C998.698667 0 1024 25.301333 1024 56.533333v910.933334c0 31.232-25.301333 56.533333-56.533333 56.533333H706.56v-396.544h133.12l19.882667-154.538667H706.56V374.186667c0-44.714667 12.373333-75.221333 76.586667-75.221334h81.834666v-138.24c-14.165333-1.92-62.72-6.101333-119.253333-6.101333-118.016 0-198.784 72.021333-198.784 204.288v113.92H413.525333v154.581333h133.418667V1024z"
                            fill="#3B5998" p-id="21653" data-spm-anchor-id="a313x.search_index.0.i51.3a673a81oQ4ASE"
                            class="selected"></path>
                    </svg>
                </div>
                <p>Facebook</p>
            </div>
            <!-- <div class="item hover" @click="visible_bind = true" v-if="user_infoStore.userToken && !user_info.status">
                <div class="svg">
                    <svg t="1729063911116" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="10531" width="20" height="20">
                        <path
                            d="M578.845448 451.658433m-27.460833 0a27.460833 27.460833 0 1 0 54.921666 0 27.460833 27.460833 0 1 0-54.921666 0Z"
                            fill="#0090FF" p-id="10532"></path>
                        <path
                            d="M510.91602 520.310515m-27.460833 0a27.460833 27.460833 0 1 0 54.921666 0 27.460833 27.460833 0 1 0-54.921666 0Z"
                            fill="#0090FF" p-id="10533"></path>
                        <path
                            d="M442.986591 588.239944m-27.460832 0a27.460833 27.460833 0 1 0 54.921665 0 27.460833 27.460833 0 1 0-54.921665 0Z"
                            fill="#0090FF" p-id="10534"></path>
                        <path
                            d="M817.321101 247.147495l-34.687368-34.687368c-42.636556-42.636556-112.011291-42.636556-154.647847 0l-132.24559 132.245589c-18.788991 18.788991-30.351447 43.35921-31.796753 70.097389-0.722653 13.730416 9.394495 26.015526 23.847565 26.738179 13.730416 0.722653 26.015526-9.394495 26.738179-23.847565 0.722653-14.45307 7.226535-27.460833 17.343684-37.577982l132.245589-132.245589c23.124912-23.124912 60.702893-23.124912 83.105152 0l34.687368 34.687368c23.124912 23.124912 23.124912 60.702893 0 83.105152l-132.24559 132.245589c-12.285109 12.285109-28.90614 18.066337-46.249823 17.343684-13.730416-0.722653-26.015526 9.394495-26.738179 23.124912-0.722653 13.730416 9.394495 26.015526 23.124911 26.738179h7.949189c28.90614 0 57.089626-11.562456 77.323924-31.796754l132.245589-132.245589c42.636556-41.913903 42.636556-111.288638 0-153.925194zM543.435427 587.51729c-13.730416-0.722653-26.015526 9.394495-26.738179 23.847565-0.722653 14.45307-7.226535 27.460833-17.343684 37.577982l-132.245589 132.245589c-10.839802 10.839802-26.015526 17.343684-41.913903 17.343684s-30.351447-5.781228-41.913903-17.343684l-34.687367-34.687367c-10.839802-10.839802-17.343684-26.015526-17.343684-41.913903 0-15.898377 5.781228-30.351447 17.343684-41.913903l132.245589-132.245589c12.285109-12.285109 28.90614-18.066337 46.249824-17.343684 13.730416 0.722653 26.015526-9.394495 26.738179-23.124912s-9.394495-26.015526-23.124912-26.738179c-31.796754-2.16796-62.870854 9.394495-85.273112 31.796754l-132.245589 132.245589c-20.956951 20.956951-31.796754 48.417784-31.796754 77.323924 0 29.628793 11.562456 57.089626 31.796754 77.323924l34.687367 34.687367c20.956951 20.956951 48.417784 31.796754 77.323924 31.796754s57.089626-11.562456 77.323924-31.796754l132.245589-132.245589c18.788991-18.788991 30.351447-43.35921 31.796754-70.097389 0.722653-13.730416-9.394495-26.015526-23.124912-26.738179z"
                            fill="#0090FF" p-id="10535"></path>
                    </svg>
                </div>
                <p>{{ $t("Binding_gifts") }}</p>
            </div> -->
            <!-- <div class="item hover">
                <div class="svg"><svg t="1729063987094" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11755" width="20" height="20"><path d="M663.9488 847.6544a57.6192 57.6192 0 0 1-42.3488 49.2416l-74.1824 19.8784a57.6 57.6 0 0 1-29.8176-111.2704l74.1824-19.8784a57.568 57.568 0 0 1 54.6112 13.8944A276.2048 276.2048 0 0 0 780.5056 684.8H761.6c-56.5568 0-102.4-45.8432-102.4-102.4V480c0-56.5568 45.8432-102.4 102.4-102.4h25.6c3.6928 0 7.3472 0.192 10.944 0.576C759.008 262.848 645.888 179.2 512 179.2S264.992 262.848 225.856 378.176c3.5968-0.384 7.2512-0.576 10.944-0.576h25.6c56.5568 0 102.4 45.8432 102.4 102.4v102.4c0 56.5568-45.8432 102.4-102.4 102.4h-25.6c-56.5568 0-102.4-45.8432-102.4-102.4V480c0-2.6752 0.1024-5.3248 0.3008-7.9488A38.7776 38.7776 0 0 1 134.4 467.2c0-201.8112 169.3824-364.8 377.6-364.8s377.6 162.9888 377.6 364.8c0 1.6448-0.1024 3.264-0.3008 4.8512 0.1984 2.624 0.3008 5.2736 0.3008 7.9488v102.4c0 34.2208-16.7808 64.512-42.5664 83.1104a327.4688 327.4688 0 0 1-183.0848 182.144z" fill="#59AAFF" p-id="11756"></path></svg></div>
                <p>{{ $t('online_customer_service') }}</p>
            </div> -->
            <div class="item hover" @click="toPage(homeUrl + '/#/allGames')">
                <div class="svg">
                    <svg t="1729064028744" class="icon" viewBox="0 0 1025 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="13036" width="20" height="20">
                        <path
                            d="M1018.88 619.52C985.6 330.24 926.72 122.88 739.84 122.88c-94.72 0-143.36 97.28-227.84 104.96-87.04-7.68-133.12-104.96-227.84-104.96-186.88 0-245.76 207.36-276.48 494.08-17.92 153.6-2.56 281.6 92.16 281.6 133.12 0 138.24-120.32 232.96-176.64 35.84-17.92 115.2-25.6 181.76-28.16 66.56 2.56 145.92 10.24 181.76 28.16 94.72 56.32 99.84 176.64 232.96 176.64C1021.44 901.12 1034.24 773.12 1018.88 619.52L1018.88 619.52zM286.72 593.92C212.48 593.92 153.6 532.48 153.6 460.8s58.88-133.12 133.12-133.12 133.12 58.88 133.12 133.12S358.4 593.92 286.72 593.92L286.72 593.92zM883.2 486.4l-104.96 0 0 104.96-51.2 0L727.04 486.4l-104.96 0 0-51.2 104.96 0L727.04 332.8l51.2 0L778.24 435.2l104.96 0L883.2 486.4 883.2 486.4 883.2 486.4zM883.2 486.4"
                            fill="#1296db" p-id="13037"></path>
                        <path
                            d="M209.92 460.8c0 20.48 7.68 38.4 23.04 53.76 12.8 12.8 33.28 23.04 53.76 23.04 20.48 0 38.4-7.68 53.76-23.04 12.8-12.8 23.04-33.28 23.04-53.76 0-20.48-7.68-38.4-23.04-53.76-12.8-12.8-33.28-23.04-53.76-23.04-20.48 0-38.4 7.68-53.76 23.04C217.6 419.84 209.92 440.32 209.92 460.8L209.92 460.8zM209.92 460.8"
                            fill="#1296db" p-id="13038"></path>
                    </svg>
                </div>
                <p>{{ $t("header_nav_all") }}</p>
            </div>
        </div>
    </div>
    <div class="box" v-if="$route.path !== '/playgame'">
        <div class="child_box">
            <div class="left">
                <div class="logo" @click="toPage2('/')">
                    <img v-if="selectedCountry == 'zh'" width="280" src="../../assets/logo.gif" alt="" />
                    <img v-if="selectedCountry == 'en'" width="280" src="../../assets/logo_en.gif" alt="" />
                    <!-- <div class="title">
                    <p :style="lang == 'zh' ? 'letter-spacing: 8px;' : 'font-size:15px;'">{{ $t('Game_platform') }}</p>
                    <p>yyfuns.com</p>
                </div> -->
                </div>
                <div class="menu">
                    <p @click="toPage2('/')" :class="{ active: route.path === '/home' }">
                        {{ $t("home") }}
                    </p>
                    <p v-if="lang == 'zh'" @click="toPage2('/home/reserve')"
                        :class="{ active: route.path.startsWith('/home/reserve') }">
                        {{ $t("new_game") }}
                    </p>
                    <p v-if="lang == 'zh'" @click="toPage2('/allGames')"
                        :class="{ active: route.path.startsWith('/allGames') }">
                        {{ $t("header_nav_all") }}
                    </p>
                    <p @click="toPage2('/home/hotActivity')"
                        :class="{ active: route.path.startsWith('/home/hotActivity') }">
                        {{ $t("Activity_Center") }}
                    </p>
                    <p @click="toPage2('/recharge')" :class="{ active: route.path.startsWith('/recharge') }">
                        {{ $t("recharge") }}
                    </p>
                    <p id="giftPack" @click="toPage2('/giftPack/0')"
                        :class="{ active: route.path.startsWith('/giftPack') }">
                        {{ $t("game_GiftPack") }}
                    </p>
                    <!-- <el-badge :value="unreadMessage" :max="99" :offset="[-45, 7]" class="item" :hidden="!unreadMessage">
                        <p @click="isCustomerservice = !isCustomerservice">{{ $t('customer_service') }}</p>
                    </el-badge> -->

                    <!--                <p @click="visible_bind = true" v-if="user_infoStore.userToken && !user_info.status">{{ $t('Binding_gifts') }}</p>-->
                    <!--                <p v-if="isPwa" @click="pwaEvent.prompt()">{{ $t('Add_desktop') }}</p>-->
                    <p @click="toPage2('/userCenter')" :class="{ active: route.path.startsWith('/userCenter') }">
                        {{ $t("Personal_Center") }}
                    </p>
                    <!-- <p :class="{ active: route.path.startsWith('/download-app') }">下載APP</p> -->
                    <li class="flex-list">
                        <div class="language">
                            <div class="language-text">
                                <img src="../../assets/circle.png" />
                            </div>
                            <svg t="1727430616198" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="6542" width="15" height="15">
                                <path
                                    d="M535.466667 812.8l450.133333-563.2c14.933333-19.2 2.133333-49.066667-23.466667-49.066667H61.866667c-25.6 0-38.4 29.866667-23.466667 49.066667l450.133333 563.2c12.8 14.933333 34.133333 14.933333 46.933334 0z"
                                    fill="#515151" p-id="6543"></path>
                            </svg>
                            <div class="language-menu">
                                <ul>
                                    <li><a @click="handleChange('en')">ENGLISH</a></li>
                                    <li><a @click="handleChange('zh')">中文繁體</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </div>
            </div>
            <div class="right" :style="$route.fullPath == '/home' ? 'display:none' : ''">
                <!-- <div class="search" style="opacity: 0;">
                <input type="text" placeholder="搜索更多游戲">
                <svg t="1718181196824" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4301" width="24" height="24"><path d="M888.6 851.9L669.1 632.5c44.9-53.3 72-122.1 72-197 0-169-137.5-306.6-306.5-306.6S128 266.4 128 435.4 265.5 742 434.5 742c75.9 0 145.3-27.8 198.9-73.6l219.3 219.3c4.9 4.9 11.4 7.4 17.9 7.4 6.5 0 13-2.5 17.9-7.4 10-9.9 10-25.9 0.1-35.8z m-710-416.5c0-141.1 114.8-255.9 255.9-255.9s255.9 114.8 255.9 255.9c0 141.1-114.8 255.9-255.9 255.9S178.6 576.6 178.6 435.4z" p-id="4302" fill="#aeb7c9"></path></svg>
            </div> -->
                <div class="user_box">
                    <div class="user_img">
                        <img @click="toPage2('/userCenter')"
                            v-if="user_info.user_avatar && user_infoStore.userToken" width="40" height="40"
                            :src="user_info.user_avatar" alt="" />
                        <svg @click="toPage2('/login')" style="cursor: pointer" v-if="!user_infoStore.userToken"
                            t="1719544528829" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4643" width="40" height="40">
                            <path
                                d="M1023.464334 512.079668A511.504397 511.504397 0 1 1 325.652931 35.993758a500.49811 500.49811 0 0 1 372.741992 0A511.472402 511.472402 0 0 1 1023.464334 512.079668M315.414524 404.576398a225.436916 225.436916 0 0 0 108.143171 197.089328 176.7085 176.7085 0 0 0 174.052913 1.599751 224.477066 224.477066 0 0 0 111.022722-198.689079 197.985189 197.985189 0 1 0-393.218806 0m198.369129 585.50888a475.062068 475.062068 0 0 0 370.182391-175.972614c-10.238407-85.106755-93.10551-157.095552-209.567386-193.249926a238.13894 238.13894 0 0 1-327.309063-2.879552c-113.902274 32.314971-197.409278 98.544664-216.926241 177.892316a476.021919 476.021919 0 0 0 383.620299 194.529726"
                                fill="#C0C5CF" p-id="4644"></path>
                        </svg>
                        <svg @click="toPage2('/userCenter')" style="cursor: pointer"
                            v-if="!user_info.user_avatar && user_infoStore.userToken" t="1719544828412" class="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4801"
                            width="40" height="40">
                            <path
                                d="M1023.464334 512.079668A511.504397 511.504397 0 1 1 325.652931 35.993758a500.49811 500.49811 0 0 1 372.741992 0A511.472402 511.472402 0 0 1 1023.464334 512.079668M315.414524 404.576398a225.436916 225.436916 0 0 0 108.143171 197.089328 176.7085 176.7085 0 0 0 174.052913 1.599751 224.477066 224.477066 0 0 0 111.022722-198.689079 197.985189 197.985189 0 1 0-393.218806 0m198.369129 585.50888a475.062068 475.062068 0 0 0 370.182391-175.972614c-10.238407-85.106755-93.10551-157.095552-209.567386-193.249926a238.13894 238.13894 0 0 1-327.309063-2.879552c-113.902274 32.314971-197.409278 98.544664-216.926241 177.892316a476.021919 476.021919 0 0 0 383.620299 194.529726"
                                fill="#1296db" p-id="4802"></path>
                        </svg>
                        <div @click="toPage2('/userCenter')" v-if="avatar_masker" class="avatar_masker">
                            {{ masker_title }}
                        </div>
                    </div>
                </div>
                <p class="lug">{{ user_info.nickname }}</p>
                <p class="lug" style="display: none">{{ $t("lug") }}</p>

                <!-- <div id="google_translate_element" class="footer-translate-element"> </div> -->

                <el-select @change="handleChange" style="
            display: none;
            width: 100px;
            margin-left: 10px;
            margin-top: 8px;
          " class="select" v-model="selectedCountry" placeholder="選擇語言" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="vp-container" v-if="user_infoStore.userToken">
                    <div class="vp_userImg">
                        <div class="user_box" style="height: 70px">
                            <img v-if="user_info.user_avatar && user_infoStore.userToken" width="70"
                                :src="user_info.user_avatar" alt="" />
                            <svg style="cursor: pointer" v-if="!user_infoStore.userToken" t="1719544528829" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4643"
                                width="70" height="70">
                                <path
                                    d="M1023.464334 512.079668A511.504397 511.504397 0 1 1 325.652931 35.993758a500.49811 500.49811 0 0 1 372.741992 0A511.472402 511.472402 0 0 1 1023.464334 512.079668M315.414524 404.576398a225.436916 225.436916 0 0 0 108.143171 197.089328 176.7085 176.7085 0 0 0 174.052913 1.599751 224.477066 224.477066 0 0 0 111.022722-198.689079 197.985189 197.985189 0 1 0-393.218806 0m198.369129 585.50888a475.062068 475.062068 0 0 0 370.182391-175.972614c-10.238407-85.106755-93.10551-157.095552-209.567386-193.249926a238.13894 238.13894 0 0 1-327.309063-2.879552c-113.902274 32.314971-197.409278 98.544664-216.926241 177.892316a476.021919 476.021919 0 0 0 383.620299 194.529726"
                                    fill="#C0C5CF" p-id="4644"></path>
                            </svg>
                            <svg style="cursor: pointer" v-if="!user_info.user_avatar && user_infoStore.userToken"
                                t="1719544828412" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4801" width="70" height="70">
                                <path
                                    d="M1023.464334 512.079668A511.504397 511.504397 0 1 1 325.652931 35.993758a500.49811 500.49811 0 0 1 372.741992 0A511.472402 511.472402 0 0 1 1023.464334 512.079668M315.414524 404.576398a225.436916 225.436916 0 0 0 108.143171 197.089328 176.7085 176.7085 0 0 0 174.052913 1.599751 224.477066 224.477066 0 0 0 111.022722-198.689079 197.985189 197.985189 0 1 0-393.218806 0m198.369129 585.50888a475.062068 475.062068 0 0 0 370.182391-175.972614c-10.238407-85.106755-93.10551-157.095552-209.567386-193.249926a238.13894 238.13894 0 0 1-327.309063-2.879552c-113.902274 32.314971-197.409278 98.544664-216.926241 177.892316a476.021919 476.021919 0 0 0 383.620299 194.529726"
                                    fill="#1296db" p-id="4802"></path>
                            </svg>
                            <div style="font-size: 16px" v-if="avatar_masker" class="avatar_masker">
                                {{ masker_title }}
                            </div>
                        </div>
                        <h3 class="nickname">{{ user_info.nickname }}</h3>
                    </div>
                    <div class="level-content">
                        <div class="user-item">
                            {{ $t("identity") }}
                            <span v-if="user_info.status" class="user-uid-icon formal">{{
                                $t("official_users")
                                }}</span>
                            <span v-if="!user_info.status" @click="visible_bind = true" class="user-uid-icon tourist">{{
                                $t("bind_account") }}</span>
                        </div>
                        <div class="level-info">
                            <span class="grade">{{ $t("level") }}
                                <div class="level_box">
                                    {{ user_info.level_name }} {{ $t("vip") }}
                                </div>
                            </span>
                        </div>
                        <span v-if="user_info.next_level" style="font-size: 15px" class="progress">{{
                            user_info.experience }} /
                            <p style="font-size: 15px; display: inline">
                                {{ user_info.next_level.level_exper || "∞" }}
                            </p>
                        </span>
                        <div class="level-bar">
                            <div class="level-progress" :style="{ width: progressWidth }"></div>
                        </div>
                    </div>
                    <div class="money">
                        <p>
                            {{ $t("Y_coin") }} ：<span>{{ user_info.money }}</span>
                        </p>
                        <p>
                            {{ $t("integral") }} ：<span>{{ user_info.integral }}</span>
                        </p>
                        <p>
                            {{ $t("RemainingEpisodes") }} ：<span>{{ user_info.episode_num || 0 }}</span>
                        </p>
                    </div>
                    <div class="links">
                        <a @click="toPage2('/userCenter')" target="_blank" class="link-item">
                            <div class="link-title">
                                <p>
                                    <svg t="1718868958716" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="5551" width="26">
                                        <path
                                            d="M512 447.223c-88.224 0-160-71.776-160-160s71.776-160 160-160c88.225 0 160 71.776 160 160s-71.775 160-160 160z m0-256c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zM454.901 870.594c-96.594 0-184.933-3.802-231.263-49.955C203.308 800.386 193 774.164 193 742.701c0-31.629 10.247-62.812 30.457-92.686 17.978-26.573 42.908-50.741 74.098-71.833C359.256 536.46 437.418 512.53 512 512.53c74.55 0 152.55 23.943 214.002 65.691 31.05 21.094 55.861 45.273 73.746 71.867C819.822 679.937 830 711.096 830 742.701c0 31.552-10.317 57.827-30.664 78.097-50.714 50.521-151.822 50.128-258.88 49.723a7395.45 7395.45 0 0 0-56.914-0.001c-9.605 0.037-19.163 0.074-28.641 0.074zM512 806.447c9.567 0 19.149 0.037 28.701 0.073 49.52 0.191 96.284 0.37 135.808-4.396 38.418-4.633 64.546-13.604 77.659-26.668 5.079-5.06 11.832-13.96 11.832-32.755 0-38.089-27.688-78.744-75.963-111.54C638.933 596.442 574.04 576.53 512 576.53c-126.309 0-255 83.862-255 166.171 0 18.675 6.738 27.547 11.807 32.596 32.045 31.922 128.975 31.55 214.491 31.224 9.556-0.037 19.139-0.074 28.702-0.074z"
                                            fill="#707070" p-id="5552"></path>
                                    </svg>
                                </p>
                                <p>{{ $t("Personal_Center") }}</p>
                            </div>
                        </a>
                        <a @click="toPage2('/userCenter/WatchHistory')" target="_blank" class="link-item">
                            <div class="link-title">
                                <p>
                                    <svg t="1745555007212" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6722" width="26" height="26"><path d="M512 168c56.16 0 110.432 13.504 159.168 38.944a24 24 0 0 1-22.24 42.56A294.592 294.592 0 0 0 512 216 296 296 0 1 0 808 512a294.528 294.528 0 0 0-58.432-176.608 24 24 0 0 1 38.496-28.672A342.528 342.528 0 0 1 856 512c0 189.984-154.016 344-344 344S168 701.984 168 512 322.016 168 512 168z m0 149.504a24 24 0 0 1 24 24v159.808l116.224 104.416a24 24 0 0 1 3.968 31.04l-2.176 2.848a24 24 0 0 1-33.888 1.792l-124.16-111.552A24 24 0 0 1 488 512v-170.496a24 24 0 0 1 24-24z" fill="#707070" p-id="6723"></path></svg>                                </p>
                                <p>{{ $t("WatchHistory") }}</p>
                            </div>
                        </a>
                        <a class="link-item" @click="signOut">
                            <div class="link-title">
                                <p>
                                    <svg t="1718870568537" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="7758" width="26" height="26">
                                        <path
                                            d="M827.21064355 677.0242416c-11.0539363 0-20.01466016 8.87911868-20.13667181 19.93701641v123.5161708c0 27.93273926-1.40788738 24.27397508-29.30022019 24.27397508H214.83033703c-27.89233281 0-38.38216342 3.65480276-38.38216343-24.27397508V200.32957701c0-27.93749296 10.48983061-27.29257437 38.38216341-27.29257437h562.94737596c27.8931251 0 29.30022021-0.64491858 29.3002202 27.29257437v120.49836379h0.28442969c1.56555176 9.56840515 9.84887343 16.88276438 19.85224211 16.88276438 10.0152529 0 18.33501962-7.31435923 19.89660995-16.88355666h0.24402326V180.35136186c0-27.8931251-22.5864117-50.51994324-50.48745963-50.51994323H186.65436678c-27.89233281 0-50.48349821 22.62761042-50.4834982 50.51994324v657.04527635c0 27.93353156 22.5864117 50.5643111 50.4834982 50.56431111h610.20945036c27.90025564 0 50.48745962-22.63077956 50.48745962-50.56351883V696.96046573c-0.12201162-11.0539363-9.08273552-19.9378087-20.14063321-19.93780869z m62.42479177-177.04995963a22.29722829 22.29722829 0 0 0-4.01925307-5.63075725 21.38134883 21.38134883 0 0 0-3.1318958-2.57175152L687.14367507 296.30994246c-7.31356694-7.31435923-19.61297256-6.83106642-27.45420017 1.04581394-7.87371122 7.8745035-8.36413456 20.17390912-1.04264479 27.45499244l163.22144729 163.34266664H414.79075218c-11.09434275 0-20.13587951 9.00509174-20.13587951 20.13984093 0 11.13158006 9.04153678 20.17787053 20.13587951 20.17787052h408.24138935L658.64683011 692.94517409c-7.31752836 7.30960552-6.83502784 19.60901114 1.04264479 27.48668376 7.84122761 7.88163406 20.13984095 8.3245204 27.45420017 1.04660623l195.34061138-195.49827578c1.12345768-0.72573148 2.17085618-1.60675049 3.1318958-2.57175151 1.68756338-1.6915248 3.0138456-3.61835773 4.01925307-5.63471868 1.36748094-2.49014634 2.08925099-5.30195969 2.16689476-8.15734862v-1.44433243c-0.07764376-2.85221979-0.8002061-5.66641001-2.16689476-8.19775508z"
                                            p-id="7759" fill="#707070"></path>
                                    </svg>
                                </p>
                                <p>{{ $t("login_out") }}</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ContacUs v-if="isContacUs" :isContacUs_fn="isContacUs_fn" />
    <BindAccount :is_force_login="is_force_login" :visible="visible_bind" :handleClose="handleClose" :getUserInfo="getUserInfo"
        :fb_bind_show="fb_bind_show" :yh_bind_show="yh_bind_show" :gg_bind_show="gg_bind_show" />

    <div v-if="lang == 'zh'">
        <Dialog :title="'Facebook绑定'" :title2="'Facebook是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'"
            :visible="dialog_fb_bind" :handleClose="fb_bind_com" :paySubmit="fb_bind_com" />
        <Dialog :title="'Yahoo绑定'" :title2="'Yahoo是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'"
            :visible="dialog_yh_bind" :handleClose="yh_bind_com" :paySubmit="yh_bind_com" />
        <Dialog :title="'Google绑定'" :title2="'Google是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'"
            :visible="dialog_gg_bind" :handleClose="gg_bind_com" :paySubmit="gg_bind_com" />
    </div>

    <div v-if="lang == 'en'">
        <Dialog :title="'Facebook binding'" :title2="'Is Facebook successfully bound?'" :cancel_title="'Binding failed'"
            :sub_title="'Binding successful'" :visible="dialog_fb_bind" :handleClose="fb_bind_com"
            :paySubmit="fb_bind_com" />
        <Dialog :title="'Yahoo binding'" :title2="'Is Yahoo successfully bound?'" :cancel_title="'Binding failed'"
            :sub_title="'Binding successful'" :visible="dialog_yh_bind" :handleClose="yh_bind_com"
            :paySubmit="yh_bind_com" />
        <Dialog :title="'Google binding'" :title2="'Is Google successfully bound?'" :cancel_title="'Binding failed'"
            :sub_title="'Binding successful'" :visible="dialog_gg_bind" :handleClose="gg_bind_com"
            :paySubmit="gg_bind_com" />
    </div>

    <CustomerService ref="CustomerService_ref" class="CustomerService" v-show="isCustomerservice" :close_fn="close_CustomerService"
        :setUnreadMessage="setUnreadMessage" :isCustomerservice="isCustomerservice" :unreadMessage="unreadMessage" />

    <div class="fixed_box ishidden" :style="route.fullPath.includes('SandSculptureDetail') ? 'top: 15%;' : ''">
        <div class="fixed_item" :style="lang == 'en' ? 'transform: translateX(75%);' : ''" v-show="isPwa && !$route.fullPath.includes('playgame')"
            @click="pwaEvent.prompt()">
            <svg t="1739953629598" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="5886" width="25" height="25">
                <path
                    d="M427.631 150.163c-58.267 95.022-141.511 155.612-249.73 181.765-108.217 26.155-126.224 81.673-54.019 166.554 72.204 84.883 103.998 182.918 95.387 294.104s38.533 145.499 141.43 102.936c102.893-42.562 205.788-42.562 308.684 0 102.891 42.562 150.036 8.25 141.421-102.936-8.608-111.186 23.188-209.221 95.393-294.104 72.201-84.881 54.195-140.399-54.021-166.554-108.217-26.153-191.463-86.743-249.73-181.765-58.272-95.024-116.542-95.024-174.815 0z"
                    fill="#FFA820" p-id="5887"></path>
                <path
                    d="M866.566 335.734c23.802 49.345 37.995 104.195 40.155 162.121 68.269-80.619 54.888-134.66-40.155-162.121zM92.569 453.413a406.489 406.489 0 0 1 28.373-100.714c-41.618 23.102-51.081 56.672-28.373 100.714zM355.737 897.531c-51.473-19.016-98.077-48.079-137.43-84.814-1.449 93.431 44.362 121.703 137.43 84.814zM573.729 111.044c-37.372-40.921-74.744-42.756-112.116-5.506a414.758 414.758 0 0 1 35.994-1.564c26.012 0 51.456 2.432 76.122 7.07zM656.98 890.605a462.555 462.555 0 0 1 12.403 4.917c102.891 42.562 150.036 8.25 141.421-102.936a465.55 465.55 0 0 1-0.891-14.477c-41.179 48.53-93.465 87.341-152.933 112.496z"
                    fill="#FEAC33" p-id="5888"></path>
                <path
                    d="M613.07 166.677a461.698 461.698 0 0 1-10.624-16.514c-9.572-15.61-19.144-28.638-28.717-39.119-24.666-4.638-50.109-7.07-76.122-7.07-12.129 0-24.133 0.531-35.994 1.564-10.072 10.039-20.144 22.916-30.216 38.633a356.411 356.411 0 0 1 48.778-3.343c47.008-0.001 91.87 9.183 132.895 25.849zM164.416 335.479c-17.11 4.887-31.599 10.627-43.473 17.219A406.5 406.5 0 0 0 92.57 453.412c7.203 13.97 17.636 28.992 31.312 45.069a470.582 470.582 0 0 1 3.081 3.663 361.655 361.655 0 0 1-0.094-8.011c-0.001-57.054 13.529-110.947 37.547-158.654zM906.196 498.482c0.179-0.21 0.348-0.417 0.525-0.626-2.159-57.927-16.353-112.776-40.155-162.121a337.172 337.172 0 0 0-14.391-3.806c-25.257-6.104-49.135-14.109-71.671-23.964 33.581 54.058 52.977 117.848 52.977 186.17 0 195.126-158.181 353.307-353.306 353.307-102.974 0-195.654-44.058-260.231-114.346 1.116 19.394 0.895 39.223-0.675 59.491a326.777 326.777 0 0 0-0.963 20.131c39.353 36.734 85.957 65.797 137.43 84.814 1.64-0.65 3.293-1.318 4.962-2.009 98.759-40.852 197.519-42.486 296.281-4.917 59.469-25.156 111.754-63.966 152.933-112.497-4.86-105.237 27.23-198.448 96.284-279.627z"
                    fill="#FEB133" p-id="5889"></path>
                <path
                    d="M480.175 847.44c195.126 0 353.306-158.181 353.306-353.307 0-68.322-19.396-132.112-52.977-186.17-68.304-29.87-124.124-76.955-167.434-141.286-41.024-16.666-85.887-25.85-132.895-25.85a356.4 356.4 0 0 0-48.778 3.343 363.085 363.085 0 0 0-3.766 5.992 451.062 451.062 0 0 1-22.343 33.089 298.622 298.622 0 0 1 57.456-5.57c164.143 0 297.207 133.064 297.207 297.207S626.887 772.096 462.744 772.096 165.536 639.032 165.536 474.889c0-55.099 15.012-106.684 41.141-150.922a454.734 454.734 0 0 1-28.776 7.961 337.634 337.634 0 0 0-13.485 3.552c-24.017 47.707-37.547 101.599-37.547 158.654 0 2.678 0.035 5.347 0.094 8.011 57.074 68.495 88.064 145.479 92.981 230.949 64.577 70.289 157.257 114.346 260.231 114.346z"
                    fill="#FEB633" p-id="5890"></path>
                <path
                    d="M462.744 772.096c164.143 0 297.207-133.064 297.207-297.207S626.887 177.681 462.744 177.681a298.622 298.622 0 0 0-57.456 5.57c-11.787 15.877-24.419 30.59-37.883 44.155 24.44-8.34 50.644-12.872 77.908-12.872 133.16 0 241.108 107.948 241.108 241.108s-107.948 241.11-241.109 241.11-241.108-107.948-241.108-241.109c0-57.298 20-109.917 53.382-151.287-16.245 7.536-33.208 14.082-50.909 19.611-26.13 44.238-41.141 95.823-41.141 150.922 0 164.143 133.065 297.207 297.208 297.207z"
                    fill="#FFBC34" p-id="5891"></path>
                <path
                    d="M445.312 696.752c133.16 0 241.108-107.948 241.108-241.108S578.473 214.535 445.312 214.535c-27.264 0-53.468 4.531-77.908 12.872-31.899 32.14-68.507 57.787-109.819 76.95-33.382 41.37-53.382 93.989-53.382 151.287 0.001 133.16 107.949 241.108 241.109 241.108z m-17.431-445.363c102.178 0 185.009 82.831 185.009 185.009s-82.831 185.009-185.009 185.009-185.009-82.831-185.009-185.009 82.831-185.009 185.009-185.009z"
                    fill="#FFC134" p-id="5892"></path>
                <path
                    d="M427.881 621.407c102.178 0 185.009-82.831 185.009-185.009s-82.831-185.009-185.009-185.009-185.009 82.831-185.009 185.009 82.831 185.009 185.009 185.009zM410.45 288.243c71.195 0 128.91 57.715 128.91 128.91s-57.715 128.91-128.91 128.91-128.91-57.715-128.91-128.91 57.715-128.91 128.91-128.91z"
                    fill="#FFC634" p-id="5893"></path>
                <path d="M410.45 417.153m-128.91 0a128.91 128.91 0 1 0 257.82 0 128.91 128.91 0 1 0-257.82 0Z"
                    fill="#FFCB34" p-id="5894"></path>
                <path
                    d="M515.039 96.895c10.392 0 20.967 4.503 32.329 13.768 12.927 10.54 26.295 26.996 39.733 48.91 60.575 98.786 148.336 162.661 260.846 189.852 24.94 6.028 44.683 13.674 58.679 22.726 12.312 7.962 19.864 16.651 23.086 26.56 3.226 9.921 2.224 21.407-3.063 35.114-6.01 15.58-17.504 33.411-34.163 52.995-75.056 88.236-108.576 191.578-99.628 307.157 3.317 42.811-2.285 73.386-16.199 88.42-7.971 8.612-19.303 12.799-34.643 12.799-17.473 0-39.595-5.486-65.753-16.307C622.862 856.8 568.619 845.6 515.039 845.6c-53.579 0-107.822 11.2-161.221 33.289-26.159 10.82-48.283 16.307-65.756 16.307-15.337 0-26.668-4.187-34.64-12.801-13.918-15.037-19.522-45.612-16.207-88.419 8.952-115.578-24.566-218.921-99.623-307.157-16.66-19.585-28.155-37.415-34.165-52.995-5.287-13.707-6.29-25.193-3.063-35.114 3.222-9.909 10.774-18.597 23.086-26.56 13.996-9.052 33.739-16.698 58.679-22.726 112.51-27.19 200.271-91.066 260.846-189.852 13.439-21.915 26.807-38.37 39.734-48.91 11.363-9.264 21.938-13.767 32.33-13.767m0-18c-29.136 0-58.271 23.756-87.408 71.268-58.267 95.022-141.511 155.612-249.73 181.765-108.217 26.155-126.223 81.673-54.019 166.554 72.204 84.883 103.999 182.918 95.387 294.104-6.227 80.404 16.708 120.61 68.793 120.61 19.941 0 44.149-5.89 72.637-17.674C412.145 874.241 463.592 863.6 515.04 863.6s102.895 10.641 154.343 31.922c28.48 11.781 52.696 17.674 72.633 17.674 52.092 0 75.018-40.2 68.788-120.61-8.608-111.186 23.188-209.221 95.393-294.104 72.201-84.881 54.195-140.399-54.021-166.554-108.217-26.154-191.463-86.743-249.73-181.765-29.136-47.512-58.272-71.268-87.407-71.268z"
                    fill="#FFA820" p-id="5895"></path>
                <path
                    d="M473.057 349.011c-27.991 45.521-67.972 74.548-119.948 87.078-51.98 12.527-60.628 39.126-25.947 79.788 34.678 40.664 49.952 87.63 45.816 140.894-4.139 53.266 18.504 69.703 67.928 49.314 49.42-20.391 98.843-20.391 148.264 0 49.42 20.389 72.062 3.953 67.928-49.314-4.135-53.265 11.133-100.23 45.815-140.894 34.681-40.662 26.034-67.261-25.947-79.788-51.977-12.531-91.961-41.558-119.947-87.078-27.99-45.524-55.977-45.524-83.962 0z"
                    fill="#FFE3B4" p-id="5896"></path>
                <path
                    d="M316.189 368.714c-6.422 0-12.636-3.445-15.882-9.502-4.695-8.763-1.397-19.672 7.365-24.367 60.839-32.598 98.424-72.405 98.796-72.804 6.792-7.26 18.181-7.641 25.442-0.85 7.26 6.791 7.641 18.182 0.85 25.442-1.687 1.803-42.069 44.572-108.086 79.944a17.923 17.923 0 0 1-8.485 2.137z"
                    fill="#FFFFFF" p-id="5897"></path>
                <path
                    d="M250.695 396.852c-7.311 0-14.186-4.487-16.878-11.742-3.458-9.32 1.293-19.68 10.613-23.138l10.546-3.914c9.321-3.459 19.68 1.293 23.138 10.613 3.458 9.32-1.293 19.68-10.613 23.138l-10.546 3.914a17.963 17.963 0 0 1-6.26 1.129z"
                    fill="#FFFFFF" p-id="5898"></path>
            </svg>
            <span>{{ $t("Add_desktop") }}</span>
        </div>
        <div v-show="user_infoStore.userToken && !user_info.status" class="fixed_item"
            :style="lang == 'en' ? 'transform: translateX(75%);' : ''" @click="visible_bind = true">
            <svg t="1739954591831" class="icon" viewBox="0 0 1230 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="17662" width="25" height="25">
                <path
                    d="M733.165056 571.7504l20.224-25.9584a131.6352 131.6352 0 0 0-22.6816-184.7808l-155.648-121.6a131.6352 131.6352 0 0 0-184.7808 22.6816L147.129856 573.44a131.6352 131.6352 0 0 0 22.6816 184.7808l155.648 121.6a131.6352 131.6352 0 0 0 184.832-22.7328l80.9984-103.7312"
                    fill="#FDA933" p-id="17663"></path>
                <path
                    d="M585.350656 386.6624l-20.224 25.9584a131.6352 131.6352 0 0 0 22.6816 184.832l155.648 121.5488a131.6352 131.6352 0 0 0 184.7808-22.6816l243.1488-311.296a131.6352 131.6352 0 0 0-22.6816-184.7808l-155.648-121.5488a131.6352 131.6352 0 0 0-184.832 22.6816l-80.9984 103.7312"
                    fill="#FFDCAC" p-id="17664"></path>
                <path
                    d="M550.790656 805.1712l-40.3456-31.488-94.5664 121.0368a102.4 102.4 0 0 1-143.7696 17.6128l-181.5552-141.824a102.4 102.4 0 0 1-17.6128-143.7696l283.648-363.1104a102.4 102.4 0 0 1 143.7696-17.6128l181.5552 141.824a102.4 102.4 0 0 1 17.664 143.7696l-23.6544 30.208 40.3456 31.5392 23.6544-30.208a153.6 153.6 0 0 0-26.4704-215.6544l-181.5552-141.824a153.6 153.6 0 0 0-215.6032 26.4704L32.544256 595.2512a153.6 153.6 0 0 0 26.4704 215.552l181.5552 141.8752a153.6 153.6 0 0 0 215.552-26.4704l94.6176-121.0368z m0 0l-40.3456-31.488-94.5664 121.0368a102.4 102.4 0 0 1-143.7696 17.6128l-181.5552-141.824a102.4 102.4 0 0 1-17.6128-143.7696l283.648-363.1104a102.4 102.4 0 0 1 143.7696-17.6128l181.5552 141.824a102.4 102.4 0 0 1 17.664 143.7696l-23.6544 30.208 40.3456 31.5392 23.6544-30.208a153.6 153.6 0 0 0-26.4704-215.6544l-181.5552-141.824a153.6 153.6 0 0 0-215.6032 26.4704L32.544256 595.2512a153.6 153.6 0 0 0 26.4704 215.552l181.5552 141.8752a153.6 153.6 0 0 0 215.552-26.4704l94.6176-121.0368z"
                    fill="#2A1212" p-id="17665"></path>
                <path
                    d="M639.673856 192.4096l40.3456 31.5392 94.5664-121.0368a102.4 102.4 0 0 1 143.7184-17.664l181.5552 141.824a102.4 102.4 0 0 1 17.664 143.7696l-283.648 363.1104a102.4 102.4 0 0 1-143.7696 17.664l-181.5552-141.824a102.4 102.4 0 0 1-17.664-143.7696l23.6544-30.2592-40.3456-31.5392-23.6544 30.2592a153.6 153.6 0 0 0 26.4704 215.6032l181.5552 141.824a153.6 153.6 0 0 0 215.6032-26.4192l283.6992-363.1104a153.6 153.6 0 0 0-26.4704-215.6032L949.843456 44.9536a153.6 153.6 0 0 0-215.6032 26.4192l-94.5664 121.0368z m0 0l40.3456 31.5392 94.5664-121.0368a102.4 102.4 0 0 1 143.7184-17.664l181.5552 141.824a102.4 102.4 0 0 1 17.664 143.7696l-283.648 363.1104a102.4 102.4 0 0 1-143.7696 17.664l-181.5552-141.824a102.4 102.4 0 0 1-17.664-143.7696l23.6544-30.2592-40.3456-31.5392-23.6544 30.2592a153.6 153.6 0 0 0 26.4704 215.6032l181.5552 141.824a153.6 153.6 0 0 0 215.6032-26.4192l283.6992-363.1104a153.6 153.6 0 0 0-26.4704-215.6032L949.843456 44.9536a153.6 153.6 0 0 0-215.6032 26.4192l-94.5664 121.0368z"
                    fill="#2A1212" p-id="17666"></path>
            </svg>
            <span>{{ $t("Binding_gifts") }}</span>
        </div>
        <div class="fixed_item" :style="lang == 'en' ? 'transform: translateX(75%);' : ''"
            @click="openCustomer">
            <svg t="1739954782807" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="30850" width="25" height="25">
                <path
                    d="M773.494096 524.858754s46.818623 66.632743 85.825748 354.136131c6.602842 48.70435-18.157814 96.311956-61.742164 118.688875l-51.060109 26.215519L667.423363 640.184656 773.494096 524.858754z"
                    fill="#FFFFFF" p-id="30851"></path>
                <path
                    d="M249.155735 524.858754S202.331517 591.491497 163.329986 878.994885c-6.602842 48.70435 18.152219 96.311956 61.74776 118.688875l51.054514 26.215519 79.094207-383.714623L249.155735 524.858754z"
                    fill="#FFFFFF" p-id="30852"></path>
                <path
                    d="M509.201374 439.256831l262.994536 86.721049s-46.16953 268.181683-55.323978 495.224306H301.530817C292.370773 794.159563 246.206839 525.97788 246.206839 525.97788L509.201374 439.256831z"
                    fill="#ED5676" p-id="30853"></path>
                <path
                    d="M615.518314 567.956284l-23.221858 143.152962L511.999189 819.759563l-80.297268-108.650317L408.480063 567.956284z"
                    fill="#ECE4F2" p-id="30854"></path>
                <path
                    d="M509.201374 819.759563s64.349727-154.131585 51.636459-300.893727L605.060085 461.639344s118.929486 171.880918-95.858711 358.120219M509.201374 819.759563s-64.349727-154.131585-51.636459-300.893727L413.34826 461.639344s-118.940678 171.880918 95.853114 358.120219"
                    fill="#FF7D93" p-id="30855"></path>
                <path
                    d="M511.999189 565.908284c59.08424 32.896699 90.486907 83.469989 106.72542 121.828022 3.318208 7.850667 11.319956 10.323934 17.917203 8.186404 4.795454-1.549989 8.852284-5.534077 9.837114-11.655694 10.883497-67.472087 18.985967-177.185574-30.63047-227.087388C591.322817 432.519694 541.090861 397.149727 511.999189 394.491803c-29.097268 2.657923-79.323628 38.027891-103.849268 62.687825-49.616437 49.901814-41.513967 159.615301-30.63047 227.087388 0.984831 6.121617 5.036066 10.105705 9.837115 11.655694 6.597246 2.13753 14.598995-0.335738 17.917202-8.186404 16.238514-38.358033 47.64118-88.931322 106.725421-121.828022"
                    fill="#FFFFFF" p-id="30856"></path>
                <path
                    d="M511.999189 567.956284C573.965178 527.27047 593.135801 466.888044 593.135801 466.888044L567.619735 383.300546H456.378642L430.862577 466.888044s19.170623 60.376831 81.136612 101.06824"
                    fill="#E8BA70" p-id="30857"></path>
                <path
                    d="M511.999189 2.797814C633.368369 2.797814 727.430883 88.131148 727.430883 232.408831c0 153.001268-74.544962 193.989246-103.362448 206.848 0 0-26.730317-59.246514-112.069246-59.246514-85.338929 0-112.069246 59.246514-112.069246 59.246514C371.112456 426.398077 296.567495 385.410098 296.567495 232.408831 296.567495 88.136743 390.630008 2.797814 511.999189 2.797814"
                    fill="#3A3A68" p-id="30858"></path>
                <path
                    d="M509.201374 450.448087c72.368262 0 156.677596-116.562536 156.677596-246.369923C665.87897 73.364284 585.374664 30.775956 509.201374 30.775956c-76.167694 0-156.677596 42.582732-156.677595 173.302208C352.523779 333.891148 436.833112 450.448087 509.201374 450.448087"
                    fill="#FFD385" p-id="30859"></path>
                <path
                    d="M336.553855 254.567519S510.505156 242.839082 560.742708 153.879781c0 0 37.031869 114.967781 114.094863 134.295082L693.857112 179.317508l-48.03847-112.930972L526.715691 19.584699 429.78262 32.443454l-81.21495 64.461639L324.545637 170.16306l12.008218 84.410055z"
                    fill="#3A3A68" p-id="30860"></path>
                <path
                    d="M884.114074 632.306011c9.551738 0 18.023519 4.319825 24.077989 11.168874 7.25753 8.219978 11.017792 20.077115 8.90824 32.437858l-55.536612 325.632a27.038077 27.038077 0 0 1-6.278295 13.250448 26.752699 26.752699 0 0 1-20.189027 9.204809H188.907604a26.769486 26.769486 0 0 1-20.194623-9.204809 27.032481 27.032481 0 0 1-6.272699-13.250448L106.898074 675.912743c-2.109552-12.366339 1.65071-24.21788 8.90824-32.437858C121.860784 636.625836 130.332566 632.306011 139.878708 632.306011H884.108478z"
                    fill="#56CBEF" p-id="30861"></path>
                <path
                    d="M884.114074 653.591781c9.551738 0 18.023519 3.933727 24.077989 10.161662a33.741639 33.741639 0 0 1 7.951388 13.317595l0.951257-5.086426a33.361137 33.361137 0 0 0-8.902645-29.51694A33.361137 33.361137 0 0 0 884.108478 632.306011H139.878708c-9.546142 0-18.017923 3.928131-24.072394 10.161661a33.361137 33.361137 0 0 0-8.90824 29.51694l0.951257 5.086426a33.70247 33.70247 0 0 1 7.956983-13.317595 33.377923 33.377923 0 0 1 24.072394-10.161662H884.108478zM511.999189 777.79235c41.71541 0 75.540984 27.55847 75.540983 61.551912s-33.825574 61.551913-75.540983 61.551913c-41.721005 0-75.540984-27.55847-75.540984-61.551913s33.819978-61.551913 75.540984-61.551912"
                    fill="#88E9FF" p-id="30862"></path>
                <path
                    d="M369.310664 340.018361l5.147978-1.482842c14.906754 54.893115 56.05141 69.016481 77.594579 72.631257 1.253421-2.126339 3.614776-3.46929 6.171979-3.195104l11.58295 1.214251c3.542033 0.369311 6.149596 3.653945 5.78588 7.2967-0.35812 3.64835-3.553224 6.32306-7.095257 5.953749l-11.58295-1.214252a6.54129 6.54129 0 0 1-5.550864-4.789858c-22.802186-4.045639-66.532022-19.265749-82.054295-76.413901"
                    fill="#56CBEF" p-id="30863"></path>
                <path
                    d="M343.000019 304.368612c-5.332634-30.787148 2.551607-57.981902 17.615038-60.757333 0.609923-0.111913 1.225443-0.173464 1.835367-0.195847 1.175082-0.044765 2.305399 0.251803 3.284633 0.811366 1.432481 0.828153 2.551607 2.210273 3.049618 3.905748 4.36459 14.761268 8.275934 31.514579 11.375913 49.409399 3.099978 17.889224 5.052852 34.99506 5.931366 50.399825 0.106317 1.997639-0.654689 3.905749-1.99764 5.226317a6.227934 6.227934 0 0 1-2.366951 1.454864c-0.581945 0.201443-1.175082 0.35812-1.790601 0.470033-15.063432 2.769836-31.598514-19.94282-36.931147-50.724372"
                    fill="#ED5676" p-id="30864"></path>
                <path
                    d="M374.839145 354.762842c1.275803-1.33176 1.997639-3.256656 1.891322-5.276678-0.828153-15.572634-2.685902-32.863126-5.634797-50.953792-2.948896-18.085071-6.669989-35.017443-10.810755-49.940984a6.793093 6.793093 0 0 0-2.165508-3.37976c1.270208-0.744219 2.596372-1.326164 4.00647-1.600349 0.570754-0.111913 1.147104-0.173464 1.723454-0.195847a5.461333 5.461333 0 0 1 3.088787 0.816961c1.348546 0.822557 2.40612 2.204678 2.870557 3.900153 4.101596 14.766863 7.783519 31.514579 10.704437 49.409399a472.99847 472.99847 0 0 1 5.573246 50.411017c0.111913 1.992044-0.609923 3.905749-1.874535 5.220721-0.615519 0.649093-1.370929 1.158295-2.227061 1.460459a11.247213 11.247213 0 0 1-1.678688 0.470033 12.73565 12.73565 0 0 1-5.623607-0.212634c0.050361-0.044765 0.111913-0.078339 0.156678-0.128699"
                    fill="#FF7D93" p-id="30865"></path>
            </svg>
            <span>{{ $t("customer_service") }}</span>
            <div class="tag" v-if="unreadMessage && !isCustomerservice">{{ unreadMessage }}</div>
        </div>
        <!-- <div class="fixed_item" :style="lang == 'en' ? 'transform: translateX(75%);' : ''" id="to_top" @click="go_to_top" style="display: none;">
        <svg t="1739955725048" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40961" width="25" height="25"><path d="M516.290821 0.918445c77.587472 39.307251 151.346922 108.024916 197.376554 181.504267a3.884042 3.884042 0 0 1 0.401475 3.286497 3.678636 3.678636 0 0 1-2.268803 2.315487c-111.572839 42.108243-287.848588 43.322006-398.954596-0.373466a3.678636 3.678636 0 0 1-2.156763-2.371506 3.884042 3.884042 0 0 1 0.466832-3.230477c50.791318-76.803195 116.399882-137.117884 196.816355-180.944069a9.065877 9.065877 0 0 1 8.309609-0.186733z" fill="#DC1D4A" p-id="40962"></path><path d="M741.583926 228.172245a942.991228 942.991228 0 0 1-222.398747 32.491504c-75.906877 1.867328-157.975936-14.098325-237.430736-25.489025 0.429485-11.203967 5.004439-19.16812 13.724859-23.901796 2.399516-1.344476 5.52729-1.344476 8.402976 0 18.234456 8.402975 40.268925 14.910613 66.103406 19.513576 122.991549 21.913092 242.00569 15.657544 357.033085-18.766645 3.025071-0.914991 6.115499-0.224079 7.936143 1.773961 3.41721 3.678636 5.629993 8.468332 6.629014 14.378425z" fill="#C8D9E5" p-id="40963"></path><path d="M741.583926 228.172245c32.86497 52.789358 51.286159 110.359076 55.272905 172.727826-35.292496 1.587229-69.931428 7.375945-105.223925 4.294854a119.443626 119.443626 0 0 0-34.1721 1.960694 5.844736 5.844736 0 0 0-3.603942 2.147427 3.585269 3.585269 0 0 0-0.597545 3.454557c3.36119 9.149906 46.309731-1.120397 57.607064 0.466832 30.063978 4.481587 60.277343 7.375945 90.658767 8.683074 5.349894 48.802613 6.657024 97.847979 3.921389 147.145435-11.857532 109.892244-33.705268 209.234086-101.582635 298.305624l-30.344078 20.727339-105.784123-10.270303c24.583371-112.842622 10.13959-216.94615-43.322006-312.310583-6.66636-11.885542-13.230018-11.820185-19.700309 0.186733-52.350536 97.726603-66.635594 201.895487-42.855174 312.497316l-108.118283 6.255548-30.53081-18.11308c-59.698471-90.005202-92.217986-189.74852-97.56788-299.239288-13.575473-116.521258 5.135152-227.160433 56.113202-331.917526 79.4548 11.3907 161.523859 27.356353 237.430736 25.489025a942.991228 942.991228 0 0 0 222.398747-32.491504z m-103.449963 176.462482c0-68.0641-55.179538-123.243638-123.243638-123.243639a123.243638 123.243638 0 0 0 0 246.487277c68.0641 0 123.243638-55.179538 123.243638-123.243638z m-301.573448-33.443842c0.037347-2.595586-1.680595-5.116478-4.761686-7.00248-3.081091-1.886001-7.301252-2.987725-11.708146-3.062417-4.406894-0.065356-8.645728 0.905654-11.792175 2.688952-3.146447 1.792635-4.939082 4.257508-4.976429 6.853093-0.046683 2.604922 1.671258 5.125815 4.761686 7.00248 3.081091 1.895338 7.291915 2.987725 11.698809 3.062417 4.406894 0.074693 8.655065-0.896317 11.801512-2.679615 3.137111-1.792635 4.929746-4.257508 4.967092-6.86243z m388.684292-0.093367c-0.018673-2.819665-1.783298-5.517954-4.892399-7.497321-3.118438-1.970031-7.329262-3.062418-11.708145-3.034408-4.38822 0.037347-8.589708 1.185753-11.670799 3.202468-3.081091 2.016714-4.799033 4.733676-4.78036 7.562677 0.018673 2.819665 1.773961 5.508617 4.892399 7.487985 3.109101 1.979368 7.319925 3.071754 11.708146 3.034408 4.38822-0.02801 8.571035-1.176417 11.661462-3.193131 3.081091-2.016714 4.808369-4.743013 4.789696-7.562678z m-388.983064 66.859674c-0.121376-2.847675-1.904674-5.508617-4.957756-7.385281-3.062418-1.895338-7.142529-2.857012-11.353353-2.679616-8.757768 0.373466-15.648207 5.471271-15.405455 11.3907 0.121376 2.847675 1.904674 5.508617 4.967092 7.394618 3.053081 1.886001 7.133192 2.847675 11.344017 2.670279 8.757768-0.364129 15.657544-5.461934 15.405455-11.3907z m369.282756 11.119938c14.75189 2.184774 20.167141-3.081091 16.245752-15.778921a7.469311 7.469311 0 0 0-6.162182-5.135151c-19.36419-2.670279-25.11556 2.679615-17.272783 16.059019 1.531209 2.595586 4.164141 4.38822 7.189213 4.855053z" fill="#E2F0FA" p-id="40964"></path><path d="M796.856831 400.900071l4.668319 21.007438c-30.381424-1.307129-60.594789-4.201488-90.658767-8.683074-11.297334-1.587229-54.245874 8.683075-57.607064-0.466832a3.585269 3.585269 0 0 1 0.597545-3.454557 5.844736 5.844736 0 0 1 3.603942-2.147427 119.443626 119.443626 0 0 1 34.1721-1.960694c35.292496 3.081091 69.931428-2.707625 105.223925-4.294854z" fill="#C8D9E5" p-id="40965"></path><path d="M567.735703 877.815604l-18.299813 71.612023-15.592187 42.014877c-11.017234 29.942602-23.715064 30.717543-38.093489 2.33416l-15.965653-44.722502-17.926347-70.865092c-23.78042-110.601829-9.495362-214.770713 42.855174-312.497316 6.470291-12.006918 13.033948-12.072275 19.700309-0.186733 53.461596 95.364433 67.905377 199.467961 43.322006 312.310583zM225.641241 567.09225c5.349894 109.490769 37.869409 209.234086 97.56788 299.239288-88.324607 18.11308-151.972477 67.261149-190.934273 147.425534-4.66832 9.616738-18.019714 15.312088-20.633973 0.466832-20.820706-118.668685-32.118039-268.708478-1.02703-386.256766 0.774941-2.838338 2.744972-5.228518 5.415251-6.535648l109.612145-54.33924zM805.446539 569.052944l101.115803 49.857654c2.763645 1.381823 4.855052 3.650626 5.882083 6.348914a223.677867 223.677867 0 0 1 12.511096 51.631615c13.379404 118.762051 9.205926 231.64202-12.511096 338.639906-2.987725 15.031989-15.031989 7.189212-19.513577-1.587228-37.53329-73.572717-104.476993-136.595032-189.066944-146.585237 67.877367-89.071539 89.725103-188.41338 101.582635-298.305624z" fill="#DC1D4A" p-id="40966"></path><path d="M461.858214 878.18907l17.926347 70.865092-84.776684 3.081091c-20.232497-17.739615-33.985367-40.296935-41.267946-67.690635l108.118283-6.255548zM567.735703 877.815604l105.784123 10.270303c-5.66734 30.689533-19.42021 51.295496-41.267946 61.808552l-82.81599-0.466832 18.299813-71.612023z" fill="#C8D9E5" p-id="40967"></path><path d="M632.25188 949.894459l-9.896837 37.906756c-0.700248 2.782318-3.482566 4.715003-6.72238 4.668319l-81.78896-1.02703 15.592187-42.014877 82.81599 0.466832zM479.784561 949.054162l15.965653 44.722502-81.882326-1.400496a7.058499 7.058499 0 0 1-6.442281-4.761686l-12.41773-35.479229 84.776684-3.081091zM638.133963 404.634727c0 68.0641-55.179538 123.243638-123.243638 123.243638a123.243638 123.243638 0 1 1 123.243638-123.243638z m-44.535769 0.093366a78.987968 78.987968 0 1 0-157.975936 0 78.987968 78.987968 0 0 0 157.975936 0z" fill="#4F687D" p-id="40968"></path><path d="M303.32413 370.668416a16.619218 9.803471 0.9 1 0 33.234335 0.522086 16.619218 9.803471 0.9 1 0-33.234335-0.522086Z" fill="#3A4C5D" p-id="40969"></path><path d="M692.193507 371.324929a10.643769 16.525851 89.6 1 0 33.050898-0.230742 10.643769 16.525851 89.6 1 0-33.050898 0.230742Z" fill="#476076" p-id="40970"></path><path d="M304.549765 439.284756a10.737135 15.872287 87.6 1 0 31.716728-1.329325 10.737135 15.872287 87.6 1 0-31.716728 1.329325Z" fill="#476076" p-id="40971"></path><path d="M698.355286 444.222077c-7.842777-13.379404-2.091407-18.729298 17.272783-16.059019a7.469311 7.469311 0 0 1 6.162182 5.135151c3.921388 12.697829-1.493862 17.963694-16.245752 15.778921a10.176937 10.176937 0 0 1-7.189213-4.855053z" fill="#476076" p-id="40972"></path><path d="M514.610226 404.728093m-78.987968 0a78.987968 78.987968 0 1 0 157.975936 0 78.987968 78.987968 0 1 0-157.975936 0Z" fill="#C8D9E5" p-id="40973"></path></svg>
        <span>{{ $t('go_to_top') }}</span>
      </div> -->
    </div>

    <div id="to_top" @click="go_to_top">
        <svg t="1739955725048" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="40961" width="60" height="60">
            <path
                d="M516.290821 0.918445c77.587472 39.307251 151.346922 108.024916 197.376554 181.504267a3.884042 3.884042 0 0 1 0.401475 3.286497 3.678636 3.678636 0 0 1-2.268803 2.315487c-111.572839 42.108243-287.848588 43.322006-398.954596-0.373466a3.678636 3.678636 0 0 1-2.156763-2.371506 3.884042 3.884042 0 0 1 0.466832-3.230477c50.791318-76.803195 116.399882-137.117884 196.816355-180.944069a9.065877 9.065877 0 0 1 8.309609-0.186733z"
                fill="#DC1D4A" p-id="40962"></path>
            <path
                d="M741.583926 228.172245a942.991228 942.991228 0 0 1-222.398747 32.491504c-75.906877 1.867328-157.975936-14.098325-237.430736-25.489025 0.429485-11.203967 5.004439-19.16812 13.724859-23.901796 2.399516-1.344476 5.52729-1.344476 8.402976 0 18.234456 8.402975 40.268925 14.910613 66.103406 19.513576 122.991549 21.913092 242.00569 15.657544 357.033085-18.766645 3.025071-0.914991 6.115499-0.224079 7.936143 1.773961 3.41721 3.678636 5.629993 8.468332 6.629014 14.378425z"
                fill="#C8D9E5" p-id="40963"></path>
            <path
                d="M741.583926 228.172245c32.86497 52.789358 51.286159 110.359076 55.272905 172.727826-35.292496 1.587229-69.931428 7.375945-105.223925 4.294854a119.443626 119.443626 0 0 0-34.1721 1.960694 5.844736 5.844736 0 0 0-3.603942 2.147427 3.585269 3.585269 0 0 0-0.597545 3.454557c3.36119 9.149906 46.309731-1.120397 57.607064 0.466832 30.063978 4.481587 60.277343 7.375945 90.658767 8.683074 5.349894 48.802613 6.657024 97.847979 3.921389 147.145435-11.857532 109.892244-33.705268 209.234086-101.582635 298.305624l-30.344078 20.727339-105.784123-10.270303c24.583371-112.842622 10.13959-216.94615-43.322006-312.310583-6.66636-11.885542-13.230018-11.820185-19.700309 0.186733-52.350536 97.726603-66.635594 201.895487-42.855174 312.497316l-108.118283 6.255548-30.53081-18.11308c-59.698471-90.005202-92.217986-189.74852-97.56788-299.239288-13.575473-116.521258 5.135152-227.160433 56.113202-331.917526 79.4548 11.3907 161.523859 27.356353 237.430736 25.489025a942.991228 942.991228 0 0 0 222.398747-32.491504z m-103.449963 176.462482c0-68.0641-55.179538-123.243638-123.243638-123.243639a123.243638 123.243638 0 0 0 0 246.487277c68.0641 0 123.243638-55.179538 123.243638-123.243638z m-301.573448-33.443842c0.037347-2.595586-1.680595-5.116478-4.761686-7.00248-3.081091-1.886001-7.301252-2.987725-11.708146-3.062417-4.406894-0.065356-8.645728 0.905654-11.792175 2.688952-3.146447 1.792635-4.939082 4.257508-4.976429 6.853093-0.046683 2.604922 1.671258 5.125815 4.761686 7.00248 3.081091 1.895338 7.291915 2.987725 11.698809 3.062417 4.406894 0.074693 8.655065-0.896317 11.801512-2.679615 3.137111-1.792635 4.929746-4.257508 4.967092-6.86243z m388.684292-0.093367c-0.018673-2.819665-1.783298-5.517954-4.892399-7.497321-3.118438-1.970031-7.329262-3.062418-11.708145-3.034408-4.38822 0.037347-8.589708 1.185753-11.670799 3.202468-3.081091 2.016714-4.799033 4.733676-4.78036 7.562677 0.018673 2.819665 1.773961 5.508617 4.892399 7.487985 3.109101 1.979368 7.319925 3.071754 11.708146 3.034408 4.38822-0.02801 8.571035-1.176417 11.661462-3.193131 3.081091-2.016714 4.808369-4.743013 4.789696-7.562678z m-388.983064 66.859674c-0.121376-2.847675-1.904674-5.508617-4.957756-7.385281-3.062418-1.895338-7.142529-2.857012-11.353353-2.679616-8.757768 0.373466-15.648207 5.471271-15.405455 11.3907 0.121376 2.847675 1.904674 5.508617 4.967092 7.394618 3.053081 1.886001 7.133192 2.847675 11.344017 2.670279 8.757768-0.364129 15.657544-5.461934 15.405455-11.3907z m369.282756 11.119938c14.75189 2.184774 20.167141-3.081091 16.245752-15.778921a7.469311 7.469311 0 0 0-6.162182-5.135151c-19.36419-2.670279-25.11556 2.679615-17.272783 16.059019 1.531209 2.595586 4.164141 4.38822 7.189213 4.855053z"
                fill="#E2F0FA" p-id="40964"></path>
            <path
                d="M796.856831 400.900071l4.668319 21.007438c-30.381424-1.307129-60.594789-4.201488-90.658767-8.683074-11.297334-1.587229-54.245874 8.683075-57.607064-0.466832a3.585269 3.585269 0 0 1 0.597545-3.454557 5.844736 5.844736 0 0 1 3.603942-2.147427 119.443626 119.443626 0 0 1 34.1721-1.960694c35.292496 3.081091 69.931428-2.707625 105.223925-4.294854z"
                fill="#C8D9E5" p-id="40965"></path>
            <path
                d="M567.735703 877.815604l-18.299813 71.612023-15.592187 42.014877c-11.017234 29.942602-23.715064 30.717543-38.093489 2.33416l-15.965653-44.722502-17.926347-70.865092c-23.78042-110.601829-9.495362-214.770713 42.855174-312.497316 6.470291-12.006918 13.033948-12.072275 19.700309-0.186733 53.461596 95.364433 67.905377 199.467961 43.322006 312.310583zM225.641241 567.09225c5.349894 109.490769 37.869409 209.234086 97.56788 299.239288-88.324607 18.11308-151.972477 67.261149-190.934273 147.425534-4.66832 9.616738-18.019714 15.312088-20.633973 0.466832-20.820706-118.668685-32.118039-268.708478-1.02703-386.256766 0.774941-2.838338 2.744972-5.228518 5.415251-6.535648l109.612145-54.33924zM805.446539 569.052944l101.115803 49.857654c2.763645 1.381823 4.855052 3.650626 5.882083 6.348914a223.677867 223.677867 0 0 1 12.511096 51.631615c13.379404 118.762051 9.205926 231.64202-12.511096 338.639906-2.987725 15.031989-15.031989 7.189212-19.513577-1.587228-37.53329-73.572717-104.476993-136.595032-189.066944-146.585237 67.877367-89.071539 89.725103-188.41338 101.582635-298.305624z"
                fill="#DC1D4A" p-id="40966"></path>
            <path
                d="M461.858214 878.18907l17.926347 70.865092-84.776684 3.081091c-20.232497-17.739615-33.985367-40.296935-41.267946-67.690635l108.118283-6.255548zM567.735703 877.815604l105.784123 10.270303c-5.66734 30.689533-19.42021 51.295496-41.267946 61.808552l-82.81599-0.466832 18.299813-71.612023z"
                fill="#C8D9E5" p-id="40967"></path>
            <path
                d="M632.25188 949.894459l-9.896837 37.906756c-0.700248 2.782318-3.482566 4.715003-6.72238 4.668319l-81.78896-1.02703 15.592187-42.014877 82.81599 0.466832zM479.784561 949.054162l15.965653 44.722502-81.882326-1.400496a7.058499 7.058499 0 0 1-6.442281-4.761686l-12.41773-35.479229 84.776684-3.081091zM638.133963 404.634727c0 68.0641-55.179538 123.243638-123.243638 123.243638a123.243638 123.243638 0 1 1 123.243638-123.243638z m-44.535769 0.093366a78.987968 78.987968 0 1 0-157.975936 0 78.987968 78.987968 0 0 0 157.975936 0z"
                fill="#4F687D" p-id="40968"></path>
            <path
                d="M303.32413 370.668416a16.619218 9.803471 0.9 1 0 33.234335 0.522086 16.619218 9.803471 0.9 1 0-33.234335-0.522086Z"
                fill="#3A4C5D" p-id="40969"></path>
            <path
                d="M692.193507 371.324929a10.643769 16.525851 89.6 1 0 33.050898-0.230742 10.643769 16.525851 89.6 1 0-33.050898 0.230742Z"
                fill="#476076" p-id="40970"></path>
            <path
                d="M304.549765 439.284756a10.737135 15.872287 87.6 1 0 31.716728-1.329325 10.737135 15.872287 87.6 1 0-31.716728 1.329325Z"
                fill="#476076" p-id="40971"></path>
            <path
                d="M698.355286 444.222077c-7.842777-13.379404-2.091407-18.729298 17.272783-16.059019a7.469311 7.469311 0 0 1 6.162182 5.135151c3.921388 12.697829-1.493862 17.963694-16.245752 15.778921a10.176937 10.176937 0 0 1-7.189213-4.855053z"
                fill="#476076" p-id="40972"></path>
            <path
                d="M514.610226 404.728093m-78.987968 0a78.987968 78.987968 0 1 0 157.975936 0 78.987968 78.987968 0 1 0-157.975936 0Z"
                fill="#C8D9E5" p-id="40973"></path>
        </svg>
        
    </div>
</template>

<script setup>
import ContacUs from "@/components/ContacUs/index.vue";
import { useRoute, useRouter } from "vue-router";
import { useUserInfoStore } from "@/store/modules/user_info/index";
import { useSetPwa } from "@/store/modules/setPwa/index";
import BindAccount from "@/components/UserCenter/bindAccount/index.vue";
import axios from "@/utils/api";
import { useLangStore } from "@/store/modules/lang/index";
import { useI18n } from "vue-i18n";
import Dialog from "@/components/Dialog/index.vue";
import CustomerService from "@/components/CustomerService/index.vue";
import { generateJWT } from "@/utils/jwt";
import { useIsShowLogin } from "@/store/modules/isShowLogin/index.js";
const isShowLoginStore = useIsShowLogin();
let timer = null;

window.addEventListener("scroll", function () {
    let button = document.getElementById("to_top");
    let scrollTop = document.documentElement.scrollTop;
    if (scrollTop >= 30) {
        button.style.opacity = "1";
    } else {
        button.style.opacity = "0";
        timer = setTimeout(() => {
            button.style.bottom = "10%";
        }, 300);
    }
});
const go_to_top = () => {
    document.documentElement.scrollTop = 0;
    document.querySelector("#to_top").style.bottom = "105%";
};
const lang = ref("");
if (localStorage.getItem("lang") == "en") {
    lang.value = "en";
} else {
    lang.value = "zh";
}
const langStore = useLangStore();
const route = useRoute();
// console.log(route);
const router = useRouter();

const isContacUs = ref(false);
const isContacUs_fn = (type) => {
    isContacUs.value = type;
};

const isCustomerservice = ref(false);
const close_CustomerService = () => {
    isCustomerservice.value = !isCustomerservice.value;
};

const user_infoStore = useUserInfoStore();
const user_info = reactive(user_infoStore.userInfo);
// console.log(user_info);

// watch(user_info.avatar_check,()=>{
//     getUserInfo()
// })

const visible_bind = ref(false);
const isClose = ref(false);
const handleClose = () => {
    visible_bind.value = false;
    // if(user_info.status == 0 && !isClose.value){
    //     setTimeout(() => {
    //         visible_bind.value = true
    //         isClose.value = true
    //     }, 900000); //900000
    // }
};

const progressWidth = computed(() => {
    if (!user_info.next_level) {
        return "100%";
    }
    return (
        `${(user_info.experience / user_info.next_level.level_exper) * 100}%` ||
        "100%"
    );
});
const signOut = () => {
    user_infoStore.clearUserinfo();
    user_infoStore.clearUserToken();
    user_infoStore.clearUserToken_expire();
    if (locale.value == "zh") {
        ElMessage.success("登出成功");
    } else {
        ElMessage.success("Exit successful");
    }

    // console.log(user_infoStore.userToken);
    if (
        window.location.href.includes("userCenter") ||
        window.location.href.includes("recharge") ||
        window.location.href.includes("playgame") ||
        window.location.href.includes("SandSculptureDetail")
    ) {
        window.top.location.href = "//" + window.location.hostname;
        // router.replace("/home");
    } else {
        window.location.reload();
    }

    avatar_masker.value = 0;
};

const avatar_masker = ref(0);
const masker_title = ref("");
const userInfo = reactive([]);
const getUserInfo = async () => {
    const data = {
        user_id: user_info.id,
    };
    const list = await axios.post("/getUserInfo", data);
    console.log(userInfo, "userInfo");
    userInfo.value = list.data;
    user_infoStore.setUserinfo(list.data.user_info);

    if (user_info) {
        switch (user_info.avatar_check) {
            case 1:
                if (locale.value == "zh") {
                    masker_title.value = "審核中";
                } else {
                    masker_title.value = "Under review";
                }

                avatar_masker.value = 1;
                break;
            case 2:
                avatar_masker.value = 0;
                break;
            case 3:
                if (locale.value == "zh") {
                    masker_title.value = "被駁回";
                } else {
                    masker_title.value = "Rejected";
                }

                avatar_masker.value = 1;
                break;
        }
    }

    console.log(userInfo.value, "userInfo.value");

    if (userInfo.value) {
        if (userInfo.value.user_info.is_money_card) {
            use_mc_game_money();
        }
    }
};

getUserInfo();

watchEffect(() => {
    // 这里可以访问 user_info.avatar_check
    if (user_info.avatar_check) {
        getUserInfo();
    }
});

const use_mc_game_money = () => {
    //每日领取省钱卡
    axios.get("/use_mc_game_money?user_id=" + userInfo.value.user_info.id);
};

const selectedCountry = ref("");
const options = [
    {
        value: "zh",
        label: "繁體",
    },
    {
        value: "en",
        label: "English",
    },
];

const { locale } = useI18n();
// console.log(locale.value);
if (locale.value == "zh") {
    selectedCountry.value = "zh";
} else {
    selectedCountry.value = "en";
}
const handleChange = (value) => {
    locale.value = value;
    localStorage.setItem("lang", value);
    // window.location.reload()
    console.log(route);
    if (route.name == "GameCenter") {
        router.replace("/");
    } else {
        window.location.reload();
    }
};

let dialog_fb_bind = ref(false);
const fb_bind_show = () => {
    dialog_fb_bind.value = true;
};
const fb_bind_com = () => {
    getUserInfo();
    dialog_fb_bind.value = false;
};

let dialog_yh_bind = ref(false);
const yh_bind_show = () => {
    dialog_yh_bind.value = true;
};
const yh_bind_com = () => {
    getUserInfo();
    dialog_yh_bind.value = false;
};

let dialog_gg_bind = ref(false);
const gg_bind_show = () => {
    dialog_gg_bind.value = true;
};
const gg_bind_com = () => {
    getUserInfo();
    dialog_gg_bind.value = false;
};

let pwaEvent = null;
let setPwa_store = useSetPwa();
// 主线程中的 JavaScript
if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/service-worker.js").then(function (reg) {
        //   console.log('Service Worker Registered');

        // 获取当前的语言设置
        const lang = localStorage.getItem("lang");

        // 使用 postMessage 传递语言设置给 Service Worker
        if (reg.active) {
            reg.active.postMessage({ lang });
        }
    });

    pwaEvent = setPwa_store.getPwa();
    // console.log(pwaEvent,'pwaEvent');
}

let isPwa = ref(false);
const pwa = localStorage.getItem("isPwa");
if (pwa == "true") {
    isPwa.value = true;
}
window.addEventListener("beforeinstallprompt", (e) => {
    console.log(e);
    pwaEvent = e;
    isPwa.value = true;
    localStorage.setItem("isPwa", true);
    setPwa_store.setPwa(e);
});

window.addEventListener("appinstalled", () => {
    console.log("应用已安装!");
    isPwa.value = false;
    localStorage.setItem("isPwa", false);
});

const loadManifest = (manifestUrl) => {
    const link = document.createElement("link");
    link.rel = "manifest";
    link.href = manifestUrl;
    document.head.appendChild(link);
};

watch(
    () => route.path, // 监听路由路径的变化
    (newPath, oldPath) => {
        console.log(`路由从 ${oldPath} 切换到 ${newPath}`);

        if (window.matchMedia("(display-mode: standalone)").matches) {
            isPwa.value = false;
        } else {
            if (!newPath.includes("gameCenter")) {
                let manifest = document.querySelector('link[rel="manifest"]');
                if (manifest) {
                    manifest.remove();
                }
                if (lang == "en") {
                    loadManifest("../../../manifest_en.json");
                } else {
                    loadManifest("../../../manifest.json");
                }
            }
        }
    }
);

onActivated(() => { });

const toPage = (url) => {
    window.open(url);
};

const addToFavorites = () => {
    const url = window.location.href; // 当前页面的 URL
    const title = document.title; // 当前页面的标题

    // 针对不同浏览器的提示
    if (window.sidebar && window.sidebar.addPanel) {
        // Firefox <23
        // Firefox
        window.sidebar.addPanel(title, url, "");
    } else if (window.external && "AddFavorite" in window.external) {
        // IE
        // IE
        window.external.AddFavorite(url, title);
    } else {
        // 其他浏览器（如 Chrome，Safari等），显示提示信息
        if (lang.value == "en") {
            ElNotification({
                title: "Warning",
                message:
                    "Please use Ctrl+D (Windows) or CMD+D (Mac) to add the page to your favorites.",
                type: "warning",
            });
        } else {
            ElNotification({
                title: "Warning",
                message: "請使用Ctrl+D（Windows）或Cmd+D（Mac）將頁面添加到我的最愛。",
                type: "warning",
            });
        }
    }
};

const homeUrl = "//" + window.location.hostname;

let fb_url = ref("");
if (localStorage.getItem("lang") == "en") {
    fb_url = "https://www.facebook.com/profile.php?id=61564549723234";
} else {
    fb_url = "https://www.facebook.com/YYTwo2/";
}

let baseUrl = ref("");

const users = [
    "b1b19539394c7e8429115766fbf86c95",
    "d7c8978cd524bae34c5954c08e19a085",
    "860921f48bd935320ca8b81b99b45445",
    "7de837f08a4efe02eb795f0e2f7f2bb2",
    "2453b28e9bd74a9028a6db5143ee3434",
    "3c5019172edb78b938f92782fea5961b",
    "db774fbe9aabb48c11218efcd12abf2f",
    "6c146c4119715cc04cb97576cb7fd940",
    "029003a1faafb8bed8cc3fc7229cb65d",
    "9614f292323683d3852b39833529e0d4",
    "8ca0873c6de7cce29fc50c4454750da3",
    "a11bd5b86385c1346522ffba25aa410e",
    "b36a3d9216581d1a54e9897bcf95fdf7",
    "ac88cde2dd7ada4fea478895d7c39e2b",
    "980e6010b3da577c4a95d0277bfa5735",
    "72719a0b7ab3cd3e018efa088eb98efc",
    "32ef473cb27b4382453ebcc9d9827de7",
    "595bb439cc8b1e1a983188a07157195d",
    "594fb821941683929ba978550082ebf1",
    "d33d7ab32adefa2bc96b5643b00373a3",
    "a0ac0febd66c2cd9a1c86eb869b69470",
    "c7f8b5675f74f4122d7229937f666558",
    "35bd623ef2f4bafeff54cdd4d2f7f7cf",
    "e481fdf407ae02e634b6e38997db92fe",
    "e75c0b8b354f89ebc8303910160af53b",
    "a905b3bb43046dbc9c68855a72670d03",
    "67851339f29713dde76299ba3f53d6d4",
    "3340d01b1eab4c3eae12725b5b5537e4",
    "d1af8313122ecba25fafe2f90e6beb04",
    "7ed8274dc1be788a86ada4a50b4c6984",
    "2ccc90a24f9e2585cb39dc5cedd8be6d",
    "8db9e078854ef9ad1bd16f072aac173a",
    "304d9f340867acdb83acba3d6786ae63",
];

const randomUser = users[Math.floor(Math.random() * users.length)];
// console.log(randomUser);

generateJWT("jwt_web", randomUser).then((result) => {
    baseUrl.value = window.baseUrl + "/index.php/V1/" + result.token;
});

setInterval(() => {
    const randomUser = users[Math.floor(Math.random() * users.length)];
    // console.log(randomUser);

    generateJWT("jwt_web", randomUser).then((result) => {
        baseUrl.value = window.baseUrl + "/index.php/V1/" + result.token;
    });
}, 1800000); //30分钟

const isPc = ref(false);
if (window.innerWidth > 1024) {
    isPc.value = true;
}

const unreadMessage = ref(0); //未读消息
const setUnreadMessage = (num) => {
    unreadMessage.value = num;
};

watchEffect(() => {
    if (isCustomerservice.value) {
        unreadMessage.value = 0;
    }
});

const openCustomer = ()=>{
    // isContacUs.value = !isContacUs.value
    // return
    if(!user_infoStore.userToken){
        if(window.location.hash !== "#/home"){
          isShowLoginStore.showLogin();
        }
        ElMessage.warning("請先登錄才能聯繫客服");
    }else{
        isCustomerservice.value = !isCustomerservice.value
    }
    
}

const closeSocket = () => {
	CustomerService_ref.value.closeSocket()
}

const openSocket = () => {
	CustomerService_ref.value.openSocket()
}

defineExpose({
    openCustomer,
    unreadMessage,
    closeSocket,
    openSocket
})

const is_force_login = ref(false)
const getGameDetail = async ()=>{
    const res = await axios.get('/gameDetail?id='+route.query.id)
    if(res.data.is_force_login && user_info.status == 0){
        is_force_login.value = true
    }

    const intervalId = setInterval(()=>{
        if(user_info.status == 0 && !visible_bind.value){
            visible_bind.value = true
        }
        clearInterval(intervalId);
    },180000) //180000 3分钟
}
if(route.path == '/playgame'){
    getGameDetail()
}

const CustomerService_ref = ref()
onMounted(()=>{
    if(user_infoStore.userToken && !import.meta.env.DEV){
        CustomerService_ref.value.connectToService()
    }
})

const toPage2 = (url)=>{
    if(window.top.location.href.includes('SandSculptureMain')){
        window.top.location.href = "//" + window.location.hostname + '/#' + url
    }else{
        router.push(url)
    }
}
</script>

<style lang="less">
html,
#to_top {
    scroll-behavior: smooth;
}

#to_top {
    position: fixed;
    bottom: 10%;
    right: 8%;
    z-index: 998;
    transition: all 0.3s ease;
    opacity: 0;
    filter: drop-shadow(2px 4px 6px rgb(103, 103, 103));
    cursor: pointer;
}

#to_top:hover {
    transform: scale(1.2);
}

.fixed_box {
    position: fixed;
    z-index: 9999;
    right: 0px;
    top: 45%;

    .fixed_item {
        font-size: 14px;
        display: block;
        // width: 100px;
        height: 17px;
        border-radius: 44px 0 0 44px;
        text-align: center;
        line-height: 15px;
        padding: 10px;
        background: linear-gradient(45deg, #22a9d6, #0fc7c7fa);
        color: #ffffff;
        border: none;
        margin: 8px 0;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        transform: translateX(72px);
    }
    .tag{
        background-color: #f56c6c;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 50%;
        position: absolute;
        top: -6px;
        left: 27px;
        font-size: 12px;
    }

    .fixed_item:nth-child(2) {
        background: linear-gradient(228deg, #22b0d6, #c624ee);
    }

    .fixed_item:nth-child(3) {
        background: linear-gradient(228deg, #00f16e, #1143dd);
    }

    .fixed_item:nth-child(4) {
        background: linear-gradient(130deg, #e8db03, #fa6958);
    }

    .fixed_item:hover {
        filter: drop-shadow(2px 4px 6px #8b8b8b);
        transform: translateX(0) !important;
    }

    .fixed_item_en {
        font-size: 14px;
        display: block;
        border: 1px solid #cdcdcd;
        text-align: center;
        line-height: 15px;
        padding: 10px;
        background-color: rgb(221 221 221 / 60%);
        margin: 5px 0;
        cursor: pointer;
    }

    svg {
        margin: 0;
        margin-left: 3px;
    }

    span {
        margin: 0 5px;
        margin-left: 8px;
        user-select: none;
    }
}

select {
    appearance: none;
    /* 去除默认样式 */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
    min-width: 115px !important;
    color: #333;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    position: relative;
}

select option {
    height: 50px !important;
    color: #333;
    /* 文字颜色 */
    background-color: #fff;
    /* 背景颜色 */
    font-size: 14px;
    /* 字体大小 */
}
</style>
<style lang="less" scoped>
.gameLogo {
    height: auto !important;
    // transform: scale(4.5) !important;
    margin-right: 8px;
}

.logo {
    cursor: pointer;
    display: flex;
    align-items: center;
    // height: 60px;
    // transform: scale(4);

    .title {
        font-size: 20px;
        border-left: 1px solid #d5d5d5;
        margin-left: 15px;
        padding-left: 15px;
    }
}

#google_translate_element {
    height: 45px;
    overflow: hidden;
    position: relative;
    top: 6px;
    left: 10px;
    min-width: 100px !important;
}

#google_translate_element::before {
    content: "▼";
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    right: 10px;
    width: 20px;
    height: 20px;
    z-index: 99999;
    color: #989898;
}

.active {
    color: @primary-color;
}

.top {
    width: 100%;
    height: 30px;
    position: relative;

    .left {
        position: absolute;
        left: 1%;
        display: flex;

        .title {
            border: none;
            padding: 0;
            padding-right: 10px;
            margin-left: 5px;

            p {
                font-size: 11px;
            }
        }

        .item {
            height: 30px;
            font-size: 11px;
            display: flex;
            align-items: center;
            border-left: 1px solid #e8e8e8;
            border-right: 1px solid #e8e8e8;
            padding: 0 8px;
            cursor: pointer;

            p {
                margin-left: 5px;
            }

            .svg {
                display: flex;
            }
        }

        .item:first-child {
            cursor: default;

            .logout {
                cursor: pointer;
            }

            .logout:hover {
                text-decoration: underline;
            }
        }

        .hover:hover {
            background-color: #e8e8e8;
        }
    }

    .right {
        position: absolute;
        right: 0;
        display: flex;

        .item {
            height: 30px;
            font-size: 11px;
            display: flex;
            align-items: center;
            border-right: 1px solid #e8e8e8;
            padding: 0 8px;
            cursor: pointer;

            p {
                margin-left: 5px;
            }

            .svg {
                display: flex;
            }

            .nickname {
                color: #1296db;
                font-weight: bold;
                cursor: pointer;
            }

            .nickname:hover {
                text-decoration: underline;
            }
        }

        .item:first-child {
            border-left: none;
            cursor: default;

            .logout {
                cursor: pointer;
            }

            .logout:hover {
                text-decoration: underline;
            }
        }

        .hover:hover {
            background-color: #e8e8e8;
        }
    }
}

.box {
    position: relative;
    z-index: 1000;
    min-width: 1160px;
    height: 80px;
    // background-color: rgb(197, 73, 73);
    display: flex;
    align-items: center;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);

    .child_box {
        // width:1276px;
        display: flex;
        justify-content: space-between;
    }

    .menu,
    .left {
        display: flex;
        margin: 0px;
    }

    .right {
        display: flex;
    }

    .menu {
        margin-left: 150px;
        align-items: center;

        p {
            padding: 5px;
            cursor: pointer;
            margin-right: 30px;
            white-space: nowrap;
        }

        p:hover {
            color: #1890ff;
        }

        .flex-list:hover {
            .language-menu {
                display: block;
            }
        }

        .flex-list {
            .language {
                display: flex;
            }

            svg {
                position: relative;
                top: 4px;
                left: 7px;
            }

            .language-menu {
                display: none;
                position: absolute;
                top: 50px;
                z-index: 1000;

                ul {
                    border-radius: 5px;
                    display: block;
                    background-color: #2b333e;
                    width: 120px !important;

                    li {
                        float: left;
                        display: block;
                        float: none !important;
                        padding: 10px 0;
                        border-radius: 5px;
                        cursor: pointer;

                        a {
                            text-align: center;
                            display: block;
                            color: #ffffff;
                            text-decoration: none;
                            -webkit-transition: all 0.3s linear;
                            -moz-transition: all 0.3s linear;
                            transition: all 0.3s linear;
                        }
                    }

                    li:hover {
                        background-color: #3c5163;
                    }
                }
            }
        }
    }

    .right {
        position: relative;
        margin-left: 100px;

        .user_box {
            height: 70px;
            display: flex;
            align-items: center;
            position: relative;
        }

        .lug {
            display: flex;
            align-items: center;
            font-size: 16px;
            color: #636363;
            margin-left: 10px;
        }

        .user_img {
            display: flex;
            align-items: center;
            position: relative;
        }

        .user_box:hover~.vp-container,
        .lug:hover~.vp-container {
            display: block;
        }

        input {
            background: #f2f4f6;
            border-radius: 16px;
            width: 200px;
            height: 32px;
            border: none;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.4);
            padding: 0 40px 0 20px;
            transition: width 300ms;
            outline: none;
        }

        img {
            transition: 0.2s;
            position: relative;
            z-index: 2;
            border-radius: 100%;
            cursor: pointer;
        }

        .search {
            display: flex;
            align-items: center;

            svg {
                position: relative;
                left: -40px;
            }
        }

        .vp-container:hover {
            display: block;
        }

        .vp-container {
            display: none;
            border-radius: 8px;
            width: 260px;
            background-color: #ffffffdb;
            backdrop-filter: blur(11px);
            position: absolute;
            z-index: 9;
            top: 60px;
            right: -60px;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 6px !important;
            transition: all 0.3s ease;

            .vp_userImg {
                padding: 20px;
                padding-bottom: 10px;
                padding-left: 0;
                display: flex;
                align-items: center;

                p,
                img {
                    margin: initial;
                }

                img {
                    border-radius: 50%;
                }

                h3 {
                    margin-left: 0px;
                    max-width: 130px;
                }
            }

            .level-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                position: relative;
                width: 100%;

                .user-item {
                    margin-left: 25px;
                    margin-top: 10px;
                    font-size: 14px;

                    .formal {
                        background-color: #fa7d7d !important;
                        color: white;
                        margin-left: 10px;
                        border-radius: 4px;
                        padding: 3px 8px;
                        font-size: 12px;
                        left: -5px;
                    }

                    .tourist {
                        background-color: rgb(208, 208, 208);
                        color: black;
                        margin-left: 20px;
                        padding: 3px 8px;
                        cursor: pointer;
                        font-size: 12px;
                        border-radius: 4px;
                        position: relative;
                        left: -15px;
                    }

                    .tourist:hover {
                        background-color: rgba(208, 208, 208, 0.7);
                    }

                    .formal {
                        background-color: rgb(250, 125, 125) !important;
                        margin-left: 10px;
                        padding: 3px 8px;
                    }
                }

                .level-info {
                    margin: 10px 0 5px 0;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .grade {
                        font-size: 14px;
                        color: #212121;

                        .level_box {
                            background-color: #2da6ff;
                            display: inline-block;
                            padding: 3px 10px;
                            border-radius: 4px;
                            font-size: 12px;
                            color: white;
                            margin-left: 5px;
                        }
                    }
                }

                .progress {
                    font-size: 12px;
                    color: #999999;
                    width: 100%;
                    margin-left: -10px;
                }

                span {
                    margin: initial;
                    position: relative;
                    left: 30px;
                }

                span:last-child {
                    // right: 25px;
                    left: 25px;
                }

                .level-bar {
                    width: 210px;
                    height: 2px;
                    background-color: #f4f4f4;
                    position: relative;
                    margin: 4px 0;

                    .level-progress {
                        position: absolute;
                        background: #f3cb85;
                        border-radius: 2px;
                        height: 2px;
                        top: 0;
                        left: 0;
                        max-width: 100%;
                    }
                }
            }

            .money {
                font-size: 13px;
                padding: 8px 25px;
                padding-bottom: 0;

                p {
                    margin-bottom: 10px;
                }
            }

            .links {
                a {
                    text-decoration: none;
                }

                a:last-child {
                    border-radius: 0 0 8px 8px;
                }

                a:hover {
                    background-color: #dbdbdb;
                }

                .link-item {
                    position: relative;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: start;
                    transition: 0.3s ease;
                    padding: 0 23px;
                    height: 42px;
                    line-height: 42px;

                    .link-title {
                        font-size: 14px;
                        color: #212121;
                        display: flex;
                        align-items: center;
                        margin: initial;

                        p {
                            line-height: 10px;
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
    }
}

.avatar_masker {
    width: 100%;
    height: 100%;
    background-color: rgba(#000, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    font-size: 10px;
    cursor: pointer;
    text-align: center;
}

// .CustomerService{
//     transform: scale(0);
//     transition: all .3s;
// }
.showCust {
    transition: all 0.3s;
    transform: translate(-50%, -50%) scale(1);
}


@media (max-width: 1025px) {
    .ishidden{
        display: none;
    }
}
</style>
